理解webpack之process.env.NODE_ENV詳解(十八)

龍恩0707發表於2018-10-12
Web

在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 屬性返回的是一個包含使用者環境資訊的物件，它可以區分開發環境或正式環境的依據，那麼我們如何配置環境變數呢？

一. 如何配置環境變數：

直接在cmd環境配置即可，檢視環境變數，新增環境變數，刪除環境變數等操作。

1.1 windows環境配置如下：

#node中常用的到的環境變數是NODE_ENV，首先檢視是否存在 
set NODE_ENV 

#如果不存在則新增環境變數 
set NODE_ENV=production 

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

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

1.2 Linux配置(mac系統環境也屬於這個)

#node中常用的到的環境變數是NODE_ENV，首先檢視是否存在
echo $NODE_ENV

#如果不存在則新增環境變數
export NODE_ENV=production

#環境變數追加值
export path=$path:/home/download:/usr/local/

#某些時候需要刪除環境變數
unset NODE_ENV

#某些時候需要顯示所有的環境變數
env

如下檢視環境變數，新增環境變數，刪除環境變數操作如下：

顯示所有的環境變數，如下圖所示

注意：如果我們在命令列中設定環境變數後，比如設定 production 後，如下設定：
export NODE_ENV=production ，那麼會在所有的專案下都是正式環境，當我們使用命令 npm install 後下載依賴包時，只會把 package.json中的dependencies依賴項下載下來，對於devDependencies中的依賴包是下載不下來的。
因此我們需要使用上面的命令 unset NODE_ENV 刪除剛剛設定的環境變數。

二：理解 DefinePlugin 含義

官網（https://webpack.js.org/plugins/define-plugin/#usage）

官網解釋的是：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": "webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
  "build": "webpack --progress --colors --devtool cheap-module-source-map",
  "build:dll": "webpack --config webpack.dll.config.js"
},

這樣配置完成後，為了驗證一下是否是全域性變數，執行npm run dev 打包後，我們可以在我們專案中入口js檔案，列印下即可：比如如下程式碼：

console.log('Running App version ' + VERSION); // 列印 Running App version 5fa3b9
console.log(PRODUCTION); // 列印 true
console.log(process.env); // 列印 { NODE_ENV: undefined }

如上資訊可以看到 process.env.NODE_ENV 列印出為undefined，那是因為我們在 package.json檔案中未進行配置。下面我們把package.json 加上 NODE_ENV變數值，程式碼打包命令變成如下：

"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"
},

如上打包命令，在dev打包命令上，前面加上了 NODE_ENV=development 命令，在build打包命令上前面加上了 NODE_ENV=production，因此繼續檢視程式碼結果變為如下：

console.log('Running App version ' + VERSION); // 列印 Running App version 5fa3b9
console.log(PRODUCTION); // 列印 true
console.log(process.env); // 列印 { NODE_ENV: 'development' }

可以看到這個時候 process.env.NODE_ENV 才有值，因此在專案打包中，為了區分開發環境和正式環境我們像如上配置即可，然後在webpack.config.js中通過 process.env.NODE_ENV 這個來區分正式環境還是開發環境即可。

三：理解 cross-env

1. 什麼是cross-env呢？
它是執行跨平臺設定和使用環境變數的指令碼。

2. 它的作用是啥？

當我們使用 NODE_ENV = production 來設定環境變數的時候，大多數windows命令會提示將會阻塞或者異常，或者，windows不支援NODE_ENV=development的這樣的設定方式，會報錯。因此 cross-env 出現了。我們就可以使用 cross-env命令，這樣我們就不必擔心平臺設定或使用環境變數了。也就是說 cross-env 能夠提供一個設定環境變數的scripts，這樣我們就能夠以unix方式設定環境變數，然而在windows上也能夠相容的。

要使用該命令的話，我們首先需要在我們的專案中進行安裝該命令，安裝方式如下：

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"
}

相關文章