如何設置process.env.NODE_ENV

NODE_ENV是一個由 Node.js 暴露給執行腳本的系統環境變量。通常用於確定在開發環境還是生產環境(dev-vs-prod)下，服務器工具、構建腳本和客戶端 library 的行為。

NODE_ENV會賦值給process.env對象，作為它的一個屬性,其值通常為“production”（生產環境）和“development”（開發環境），或者“prod”和“dev”，以此來區分不同環境下的邏輯行為，例如：

if(process.env.NODE_ENV === 'development'){ 
    //開發環境 do something
}else{
    //生產環境 do something
}

實際上process.env對象是不存在這個屬性的,打印Object.keys(process.env)可知：

[
    "TERM_SESSION_ID",
    "SSH_AUTH_SOCK",
    "Apple_PubSub_Socket_Render",
    "COLORFGBG",
    "ITERM_PROFILE",
    "XPC_FLAGS",
    "PWD",
    "SHELL",
    "LC_CTYPE",
    "TERM_PROGRAM_VERSION",
    "TERM_PROGRAM",
    "PATH",
    "COLORTERM",
    "TERM",
    "HOME",
    "TMPDIR",
    "USER",
    "XPC_SERVICE_NAME",
    "LOGNAME",
    "__CF_USER_TEXT_ENCODING",
    "ITERM_SESSION_ID",
    "SHLVL",
    "OLDPWD",
    "ZSH",
    "ANDROID_SDK_ROOT",
    "ANDROID_HOME",
    "PAGER",
    "LESS",
    "LSCOLORS",
    "NVM_DIR",
    "NVM_CD_FLAGS",
    "NVM_BIN",
    "PUB_HOSTED_URL",
    "FLUTTER_STORAGE_BASE_URL",
    "_"
]

然而process.env.NODE_ENV可用，是前端工程化過程中大家約定俗成的做法，尤其是webpack構建前端工程時，會經常使用。那這個屬性是什么時候賦值給process.env的呢？

以webpack的工程為例，通常是運行腳本時來做這件事，例如package.json中的腳本：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "NODE_ENV=development webpack --watch ",
  "build": "NODE_ENV=development webpack --mode=production"
},

說明：NODE_ENV=development在windows環境下會報錯，需要改為set NODE_ENV=production，為了解決這個差異，可以使用cross-env跨平台的設置和使用環境變量,這里就不解釋具體使用方法了。

這樣，就可以在webpack.config.js中使用process.env.NODE_ENV了，但是不能在webpack.config.js引入的模塊中使用，要想在模塊當中直接使用，我們還需要一些配置。

webpack4之前可以使用DefinePlugin插件配置

// webpack.config.js
const webpack = require('webpack');

module.exports = {
    entry: {
        app: './src/app'
    },
    output: {
        path: 'dist',
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        })
    ]
};

webpack4版本之后可以通過mode選項實現

module.exports = {
    // 定義環境變量
    mode: 'development',
    // JavaScript 執行入口文件
    entry: './main.js',
    output: {
        // 把所有依賴的模塊合並輸出到一個 bundle.js 文件
        filename: 'bundle.js',
        // 輸出文件都放到 dist 目錄下
        path: path.resolve(__dirname, './dist'),
    }, 
};

這里有個需要注意的點：

通過npm script 定義的NODE_ENV和 通過DefinePlugin、mode選項定義的NODE_ENV是兩個相互獨立的存在，NODE_ENV=development這種方式定義的NODE_ENV只能在當前腳本中生效，是個runtime（運行時）。假如webpack.config.js的mode設置為production，腳本中執行NODE_ENV=development，那么在模塊中NODE_ENV的值為production，而配置文件webpack.config.js中的NODE_ENV值為development。

如果沒有在腳本中設置環境變量，只設置了mode，在webpack的配置文件中讀取process.env.NODE_ENV為undefined，因此，例如
process.env.NODE_ENV === 'production' ? '[name].[hash].bundle.js' : '[name].bundle.js'
這樣的條件語句，在 webpack 配置文件中，無法按照預期運行。

上面的話可能不好理解，總結起來就是，DefinePlugin和mode選項定義的NODE_ENV 作用於webpack入口文件下的業務代碼，通常為src文件夾下的代碼， 而 npm腳本里的設置多用於配置相關，例如在webpack.config.js里區分環境配置不同插件