webpack 之 process.env.NODE_ENV 詳解

在node中，有全局變量process表示的是當前的node進程。process.env包含着關於系統環境的信息。可是process.env中並不存在NODE_ENV這個東西。NODE_ENV是用戶一個自定義的變量，在webpack中它的用途是判斷生產環境或開發環境的依據的。

爲了查看 process的基本信息，咱們能夠進入到 node 的repl 環境中，而後執行 process.env 命令，查看相關信息

C:\Users\Administrator> node
> process.env
{ ALLUSERSPROFILE: 'C:\\ProgramData',
  APPDATA: 'C:\\Users\\Administrator\\AppData\\Roaming',
  AWE_DIR:
   'C:\\Program Files (x86)\\Khrona LLC\\Awesomium SDK\\1.6.6\\'
   //...............
}
複製代碼

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

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

如何配置環境變量？

直接在cmd環境配置便可，查看環境變量，添加環境變量，刪除環境變量等操做。

windows環境配置以下：

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

//#若是不存在則添加環境變量 
set NODE_ENV=production 

//#環境變量追加值 set 變量名=%變量名%;變量內容 
set path=%path%;C:\devs;C:\tools\bin 

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

複製代碼

實操

// 1. 設置環境變量
C:\Users\Administrator>set NODE_ENV=development // 2. 啓動 node 的 repl 環境，查看 process.env.NODE_ENV 的值 C:\Users\Administrator>node > process.env.NODE_ENV 'development' > 複製代碼

注意：若是咱們在命令行中設置環境變量後，好比設置 production 後，以下設置： set NODE_ENV=production ，那麼會在全部的項目下都是正式環境，當咱們使用命令 npm install 後下載依賴包時，只會把 package.json中的 dependencies 依賴項下載下來，對於 devDependencies 中的依賴包是下載不下來的。

所以咱們須要使用上面的命令 set NODE_ENV 刪除剛剛設置的環境變量。

理解 DefinePlugin 含義

官網: webpack.js.org/plugins/def…

官網解釋的是：DefinePlugin容許咱們建立全局變量，能夠在編譯時進行設置，所以咱們可使用該屬性來設置全局變量來區分開發環境和正式環境。這就是 DefinePlugin 的基本功能。

所以咱們能夠在 webpack.config.js 中添加以下代碼配置全局變量信息了，由於當webpack進行編譯的時候會全局設置變量；以下代碼：

module.exports = {
  plugins: [
    // 設置環境變量信息
    new webpack.DefinePlugin({
      PRODUCTION: JSON.stringify(true),
      VERSION: JSON.stringify('1.1.0'),
      '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 1.1.0
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(process.env); // 打印 { NODE_ENV: 'development' }

複製代碼

能夠看到這個時候 process.env.NODE_ENV 纔有值，所以在項目打包中，爲了區分開發環境和正式環境咱們像如上配置便可，而後在 webpack.config.js 中經過 process.env.NODE_ENV 這個來區分正式環境仍是開發環境便可。

理解 cross-env

什麼是cross-env呢？

它是運行跨平臺設置和使用環境變量的腳本。

它的做用是啥？

當咱們使用 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"
}

複製代碼