NODE_ENV到底是個(gè)什么玩意？负懦？

NODE_ENV到底是個(gè)什么玩意访得？？

技術(shù)上講陕凹， NODE_ENV是一個(gè)由 Node.js 暴露給執(zhí)行腳本的系統(tǒng)環(huán)境變量悍抑。通常用于確定在開發(fā)環(huán)境還是生產(chǎn)環(huán)境(dev-vs-prod)下，服務(wù)器工具杜耙、構(gòu)建腳本和客戶端 library 的行為搜骡。

NODE_ENV會賦值給process.env對象，作為它的一個(gè)屬性,其值通常為“production”（生產(chǎn)環(huán)境）和“development”（開發(fā)環(huán)境）佑女，或者“prod”和“dev”记靡，以此來區(qū)分不同環(huán)境下的邏輯行為，例如：

if(process.env.NODE_ENV === 'development'){ 
    //開發(fā)環(huán)境 do something
}else{
    //生產(chǎn)環(huán)境 do something
}

實(shí)際上process.env對象是不存在這個(gè)屬性的,打印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構(gòu)建前端工程時(shí)，會經(jīng)常使用嚎花。那這個(gè)屬性是什么時(shí)候賦值給process.env的呢寸痢？

以webpack的工程為例，通常是運(yùn)行腳本時(shí)來做這件事紊选，例如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環(huán)境下會報(bào)錯(cuò)啼止，需要改為set NODE_ENV=production道逗，為了解決這個(gè)差異，可以使用cross-env跨平臺的設(shè)置和使用環(huán)境變量,這里就不解釋具體使用方法了献烦。

這樣滓窍，就可以在webpack.config.js中使用process.env.NODE_ENV了，但是不能在webpack.config.js引入的模塊中使用仿荆，要想在模塊當(dāng)中直接使用贰您，我們還需要一些配置。

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選項(xiàng)實(shí)現(xiàn)

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

這里有個(gè)需要注意的點(diǎn)：

通過npm script 定義的NODE_ENV和通過DefinePlugin拢操、mode選項(xiàng)定義的NODE_ENV是兩個(gè)相互獨(dú)立的存在锦亦，NODE_ENV=development這種方式定義的NODE_ENV只能在當(dāng)前腳本中生效，是個(gè)runtime（運(yùn)行時(shí)）令境。假如webpack.config.js的mode設(shè)置為production杠园，腳本中執(zhí)行NODE_ENV=development，那么在模塊中NODE_ENV的值為production舔庶，而配置文件webpack.config.js中的NODE_ENV值為development抛蚁。

如果沒有在腳本中設(shè)置環(huán)境變量，只設(shè)置了mode惕橙，在webpack的配置文件中讀取process.env.NODE_ENV為undefined瞧甩，因此，例如
process.env.NODE_ENV === 'production' ? '[name].[hash].bundle.js' : '[name].bundle.js'
這樣的條件語句弥鹦，在 webpack 配置文件中肚逸，無法按照預(yù)期運(yùn)行。

上面的話可能不好理解彬坏，總結(jié)起來就是朦促，DefinePlugin和mode選項(xiàng)定義的NODE_ENV 作用于webpack入口文件下的業(yè)務(wù)代碼，通常為src文件夾下的代碼栓始，而 npm腳本里的設(shè)置多用于配置相關(guān)务冕，例如在webpack.config.js里區(qū)分環(huán)境配置不同插件。

請查看 #2537

最后編輯于：2019.10.18 11:57:39

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者