process.env.NODE_ENV詳解

一、 process.env.NODE_ENV是什么？

在node中，有全局變量process表示的是當前的node進程。
process.env包含着關於系統環境的信息，但是process.env中並不存在NODE_ENV這個東西。

NODE_ENV是一個用戶自定義的變量，在webpack中它的用途是判斷生產環境或開發環境。

為了查看 process的基本信息，我們可以在文件夾中 新建一個process.js文件，在里面加一句代碼console.log(process);然后進入該文件夾，執行node process.js可以在命令行中打印如下信息：

$ node process.js process { title: 'node', version: 'v4.4.4', moduleLoadList: [....], versions: { http_parser: '2.5.2', node: '4.4.4', v8: '4.5.103.35', uv: '1.8.0', zlib: '1.2.8', ares: '1.10.1-DEV', icu: '56.1', modules: '46', openssl: '1.0.2h' }, arch: 'x64', platform: 'darwin', release: { name: 'node', lts: 'Argon', sourceUrl: 'https://nodejs.org/download/release/v4.4.4/node-v4.4.4.tar.gz', headersUrl: 'https://nodejs.org/download/release/v4.4.4/node-v4.4.4-headers.tar.gz' }, argv: [ '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin/node', '/Users/tugenhua/個人demo/process.js' ], execArgv: [], env: { TERM_PROGRAM: 'Apple_Terminal', SHELL: '/bin/zsh', TERM: 'xterm-256color', TMPDIR: '/var/folders/l7/zndlx1qs05v29pjhvkgpmhjm0000gn/T/', Apple_PubSub_Socket_Render: '/private/tmp/com.apple.launchd.7Ax4C1EWMx/Render', TERM_PROGRAM_VERSION: '404', TERM_SESSION_ID: '82E05668-442D-4180-ADA3-8CF64D85E5A9', USER: 'tugenhua', SSH_AUTH_SOCK: '/private/tmp/com.apple.launchd.MYOMheYcL3/Listeners', PATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin', PWD: '/Users/tugenhua/個人demo', LANG: 'zh_CN.UTF-8', XPC_FLAGS: '0x0', XPC_SERVICE_NAME: '0', SHLVL: '1', HOME: '/Users/tugenhua', LOGNAME: 'tugenhua', SECURITYSESSIONID: '186a8', OLDPWD: '/Users/tugenhua/工作文檔/sns_pc', ZSH: '/Users/tugenhua/.oh-my-zsh', PAGER: 'less', LESS: '-R', LC_CTYPE: 'zh_CN.UTF-8', LSCOLORS: 'Gxfxcxdxbxegedabagacad', NVM_DIR: '/Users/tugenhua/.nvm', NVM_NODEJS_ORG_MIRROR: 'https://nodejs.org/dist', NVM_IOJS_ORG_MIRROR: 'https://iojs.org/dist', NVM_RC_VERSION: '', MANPATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/share/man:/usr/local/share/man:/usr/share/man:/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.13.sdk/usr/share/man:/Applications/Xcode.app/Contents/Developer/usr/share/man:/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/share/man', NVM_PATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/lib/node', NVM_BIN: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin', _: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin/node', __CF_USER_TEXT_ENCODING: '0x1F5:0x19:0x34' }, pid: 14034, features: { debug: false, uv: true, ipv6: true, tls_npn: true, tls_sni: true, tls_ocsp: true, tls: true }, _needImmediateCallback: false, config: {}, nextTick: [Function: nextTick], _tickCallback: [Function: _tickCallback], _tickDomainCallback: [Function: _tickDomainCallback], stdout: [Getter], stderr: [Getter], stdin: [Getter], openStdin: [Function], exit: [Function], kill: [Function], mainModule: Module { id: '.', exports: {}, parent: null, filename: '/Users/tugenhua/個人demo/process.js', loaded: false, children: [], paths: [ '/Users/tugenhua/個人demo/node_modules', '/Users/tugenhua/node_modules', '/Users/node_modules', '/node_modules' ] } } 

如上就可以看到 process是node的全局變量，並且process有env這個屬性，但是沒有NODE_ENV這個屬性。

二、process.env.NODE_ENV該如何配置？

process.env屬性返回的是一個包含用戶環境信息的對象，它可以區分開發環境或正式環境的依據，那么我們如何配置它呢？

方法1：配置環境變量

• windows環境配置如下：

#node中常用的到的環境變量是NODE_ENV，首先查看是否存在 
set NODE_ENV 

#如果不存在則添加環境變量 
set NODE_ENV=production 

#環境變量追加值 set 變量名=%變量名%;變量內容 
set path=%path%;C:\web;C:\Tools 

#某些時候需要刪除環境變量 
set NODE_ENV=

• Linux配置(mac系統環境也屬於這個)如下：

#node中常用的到的環境變量是NODE_ENV，首先查看是否存在 echo $NODE_ENV #如果不存在則添加環境變量 export NODE_ENV=production #環境變量追加值 export path=$path:/home/download:/usr/local/ #某些時候需要刪除環境變量 unset NODE_ENV #某些時候需要顯示所有的環境變量 env 

注意：如果NODE_ENV設置為production后，所有的項目都會處於正式環境中。
此時使用命令npm install下載依賴包時，只會把package.json中的dependencies依賴項下載下來，對於devDependencies中的依賴包是下載不下來的。因此需要使用上面的命令unset NODE_ENV刪除剛剛設置的環境變量。

方法2：使用DefinePlugin

DefinePlugin官網的解釋是：DefinePlugin允許我們創建全局變量，可以在編譯時進行設置。

因此可以使用該屬性來設置全局變量來區分開發環境和正式環境，這就是DefinePlugin的基本功能。

我們可以在webpack.config.js中添加如下代碼配置全局變量信息，因為當webpack進行編譯的時候會全局設置變量，如下代碼：

module.exports = { plugins: [ // 設置環境變量信息 new webpack.DefinePlugin({ PRODUCTION: JSON.stringify(true), VERSION: JSON.stringify('5fa3b9'), BROWSER_SUPPORTS_HTML5: true, TWO: '1+1', 'typeof window': JSON.stringify('object'), 'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV) } }) ] } 

package.json中的打包配置如下：

"scripts": {
  "dev": "NODE_ENV=development webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
  "build": "NODE_ENV=production webpack --progress --colors --devtool cheap-module-source-map",
  "build:dll": "webpack --config webpack.dll.config.js"
},

這樣配置完成后，為了驗證一下是否是全局變量，運行npm run dev打包后，在我們項目入口js文件中打印下即可：

console.log(process.env.NODE_ENV); // 打印結果為 'development' 

發現process.env.NODE_ENV已經被作為全局變量打印出來了，因此在項目打包中為了區分開發環境和正式環境我們可以使用這種方法。

關於cross-env

• 什么是cross-env呢？
  它是運行跨平台設置和使用環境變量的腳本。

• 它的作用是啥？
  當我們使用DefinePlugin這種方法設置NODE_ENV時，大多數windows命令會提示將會阻塞或者異常，或者windows不支持NODE_ENV=development的這樣的設置方式，會報錯。因此cross-env出現了。我們可以使用cross-env命令來實現全開發平台的兼容。
  要使用該命令的話，我們首先需要在我們的項目中安裝該命令：

npm install --save-dev cross-env

在package.json中的scripts命令如下：

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
  "build": "cross-env NODE_ENV=production webpack --progress --colors --devtool cheap-module-source-map",
  "build:dll": "webpack --config webpack.dll.config.js"
}

三、vue-cli3.0中的process.env.NODE_ENV

使用vue-cli3構建的項目就簡單多了，因為vue-cli3使用上述的DefinePlugin方式幫你把process.env.NODE_ENV配置好了，我們不需要再自己去配置。
它自帶了三種模式：

development：在vue-cli-service serve下，即開發環境使用
production：在vue-cli-service build和vue-cli-service test:e2e下，即正式環境使用
test： 在vue-cli-service test:unit下使用

在package.json中的scripts命令如下

{ "name": "", "version": "0.1.0", "private": true, "scripts": { "dev": "vue-cli-service serve", //本地開發運行，會把process.env.NODE_ENV設置為'development' "build": "vue-cli-service build", //默認打包模式，會把process.env.NODE_ENV設置為'production' }, "dependencies": { } }

作者：西瓜魚仔
鏈接：https://www.jianshu.com/p/f4638f5df1c7
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。