process.env.NODE_ENV詳解

一、 process.env.NODE_ENV是什么？

在node中，有全局變量process表示的是當(dāng)前的node進(jìn)程。
process.env包含著關(guān)于系統(tǒng)環(huán)境的信息，但是process.env中并不存在NODE_ENV這個(gè)東西。

NODE_ENV是一個(gè)用戶自定義的變量，在webpack中它的用途是判斷生產(chǎn)環(huán)境或開發(fā)環(huán)境。

為了查看 process的基本信息，我們可以在文件夾中 新建一個(gè)process.js文件，在里面加一句代碼console.log(process);然后進(jìn)入該文件夾，執(zhí)行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/個(gè)人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/個(gè)人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/個(gè)人demo/process.js',
     loaded: false,
     children: [],
     paths: 
      [ '/Users/tugenhua/個(gè)人demo/node_modules',
        '/Users/tugenhua/node_modules',
        '/Users/node_modules',
        '/node_modules' ] } }

如上就可以看到 process是node的全局變量，并且process有env這個(gè)屬性，但是沒(méi)有NODE_ENV這個(gè)屬性。

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

process.env屬性返回的是一個(gè)包含用戶環(huán)境信息的對(duì)象，它可以區(qū)分開發(fā)環(huán)境或正式環(huán)境的依據(jù)，那么我們?nèi)绾闻渲盟兀?/p>

方法1：配置環(huán)境變量

  • windows環(huán)境配置如下：
#node中常用的到的環(huán)境變量是NODE_ENV，首先查看是否存在 
set NODE_ENV 

#如果不存在則添加環(huán)境變量 
set NODE_ENV=production 

#環(huán)境變量追加值 set 變量名=%變量名%;變量?jī)?nèi)容 
set path=%path%;C:\web;C:\Tools 

#某些時(shí)候需要?jiǎng)h除環(huán)境變量 
set NODE_ENV=
  • Linux配置(mac系統(tǒng)環(huán)境也屬于這個(gè))如下：
#node中常用的到的環(huán)境變量是NODE_ENV，首先查看是否存在
echo $NODE_ENV

#如果不存在則添加環(huán)境變量
export NODE_ENV=production

#環(huán)境變量追加值
export path=$path:/home/download:/usr/local/

#某些時(shí)候需要?jiǎng)h除環(huán)境變量
unset NODE_ENV

#某些時(shí)候需要顯示所有的環(huán)境變量
env

注意：如果NODE_ENV設(shè)置為production后，所有的項(xiàng)目都會(huì)處于正式環(huán)境中。
此時(shí)使用命令npm install下載依賴包時(shí)，只會(huì)把package.json中的dependencies依賴項(xiàng)下載下來(lái)，對(duì)于devDependencies中的依賴包是下載不下來(lái)的。因此需要使用上面的命令unset NODE_ENV刪除剛剛設(shè)置的環(huán)境變量。

方法2：使用DefinePlugin

DefinePlugin官網(wǎng)的解釋是：DefinePlugin允許我們創(chuàng)建全局變量，可以在編譯時(shí)進(jìn)行設(shè)置。

因此可以使用該屬性來(lái)設(shè)置全局變量來(lái)區(qū)分開發(fā)環(huán)境和正式環(huán)境，這就是DefinePlugin的基本功能。

我們可以在webpack.config.js中添加如下代碼配置全局變量信息，因?yàn)楫?dāng)webpack進(jìn)行編譯的時(shí)候會(huì)全局設(shè)置變量，如下代碼：

module.exports = {
  plugins: [
    // 設(shè)置環(huán)境變量信息
    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"
},

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

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

發(fā)現(xiàn)process.env.NODE_ENV已經(jīng)被作為全局變量打印出來(lái)了，因此在項(xiàng)目打包中為了區(qū)分開發(fā)環(huán)境和正式環(huán)境我們可以使用這種方法。

關(guān)于cross-env

  • 什么是cross-env呢？
    它是運(yùn)行跨平臺(tái)設(shè)置和使用環(huán)境變量的腳本。

  • 它的作用是啥？
    當(dāng)我們使用DefinePlugin這種方法設(shè)置NODE_ENV時(shí)，大多數(shù)windows命令會(huì)提示將會(huì)阻塞或者異常，或者windows不支持NODE_ENV=development的這樣的設(shè)置方式，會(huì)報(bào)錯(cuò)。因此cross-env出現(xiàn)了。我們可以使用cross-env命令來(lái)實(shí)現(xiàn)全開發(fā)平臺(tái)的兼容。
    要使用該命令的話，我們首先需要在我們的項(xiàng)目中安裝該命令：

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構(gòu)建的項(xiàng)目就簡(jiǎn)單多了，因?yàn)関ue-cli3使用上述的DefinePlugin方式幫你把process.env.NODE_ENV配置好了，我們不需要再自己去配置。
它自帶了三種模式：

development：在vue-cli-service serve下，即開發(fā)環(huán)境使用
production：在vue-cli-service build和vue-cli-service test:e2e下，即正式環(huán)境使用
test： 在vue-cli-service test:unit下使用

在package.json中的scripts命令如下

{
  "name": "",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve", //本地開發(fā)運(yùn)行，會(huì)把process.env.NODE_ENV設(shè)置為'development'
    "build": "vue-cli-service build", //默認(rèn)打包模式，會(huì)把process.env.NODE_ENV設(shè)置為'production'
  },
  "dependencies": {
  }
}

參考自：https://www.cnblogs.com/tugenhua0707/p/9780621.html

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容