Node 環境變量 process.env.NODE_ENV 之webpack應用

 

轉載來源：https://github.com/wfzong/NODE_ENV_TEST，這裏還有源碼能夠學習，謝謝原做者的分享！

對於process.env.NODE_ENV困惑原由爲在配置webpack時，明明配置了：process.env.NODE_ENV爲production，以下：

        new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }), new webpack.optimize.UglifyJsPlugin({ compress: process.env.NODE_ENV === 'production' }) 

但最終並無生效，獲得的 compress:false，本着有困難就gg的原則，找找找各類文檔，總算理清了其中的關係。

文檔一：Node 環境變量 文檔二：使用環境變量

文檔中說：

DefinePlugin 在原始的源碼中執行查找和替換操做，在導入的代碼中，任何出現 process.env.NODE_ENV的地方都會被替換爲"production"。所以，形如if (process.env.NODE_ENV !== 'production') console.log('...') 的代碼就會等價於 if (false) console.log('...') 而且最終經過UglifyJS等價替換掉。

也就是說，webpack config文件中定義的變量：

new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('production')
})

是爲了你將要打包的文件中用的。 那如何在webpack config文件中使用 process.env.NODE_ENV 呢？答案是corss-env

進入主題

如上信息看着也許很亂，那經過一個實例來一步步驗證一下吧~ 第一步：

npm init

生成一下package.json，而後install須要的模塊：

npm install --save-dev webpack clean-webpack-plugin html-webpack-plugin webpack-merge cross-env

1、接下來進入主題，開始配置 webpack.config.js:

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const config = {
    entry:path.join(__dirname,"src/app.js"),
    output:{
        path:path.join(__dirname,"dist"),
        filename:"bundle.js"
    },
    plugins:[
        new HtmlWebpackPlugin()
    ]

}
module.exports = config
console.log("process.env.NODE_ENV 的值是(webpack.config.js)："+ process.env.NODE_ENV)

而後新建文件 src/app.js

console.log("app test")

console.log("process.env.NODE_ENV 的值是(app.js)："+ process.env.NODE_ENV)

一切準備好後，給package.json加一行 ："build":"webpack"

  "scripts": { "build":"webpack" }

而後執行：npm run build，控制檯會有以下輸出：

λ npm run build

> node@1.0.0 build D:\works\test\VUE\NODE_ENV
> webpack

process.env.NODE_ENV 的值是(webpack.config.js)：undefined
Hash: f323df4deba684f859b8
Version: webpack 3.4.1
Time: 589ms
     Asset       Size  Chunks             Chunk Names
 bundle.js    8.18 kB       0  [emitted]  main
index.html  182 bytes          [emitted]
   [0] ./src/app.js 97 bytes {0} [built]
    + 1 hidden module
Child html-webpack-plugin for "index.html":
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]
        + 2 hidden modules

因爲沒有進行任何配置，因此上面的輸出中給出的信息是：

process.env.NODE_ENV 的值是(webpack.config.js)：undefined

經過瀏覽器訪問/dist/index.html，控制檯有以下信息輸出：

app test process.env.NODE_ENV 的值是(app.js)：undefined

也就是說，在/src/app.js裏，process.env.NODE_ENV 也未定義

2、經過webpack -p參數控制

在package.json裏增長一行：

"scripts": {
    "build":"webpack",
    "build-p":"webpack -p"
  }

而後執行： npm run build-p 命令行輸出沒有任何變化，任然是：

process.env.NODE_ENV 的值是(webpack.config.js)：undefined

但經過瀏覽器訪問/dist/index.html，控制檯有以下信息輸出：

app test process.env.NODE_ENV 的值是(app.js)：production

也就是說，經過webpack -p，然process.env.NODE_ENV值傳遞給app.js了（webpack.config.js並未獲取到~）

3、經過 webpack.DefinePlugin 定義

接着看，假設webpack.config.js是基本定義，針對上線產品，額外定義了webpack.config.prod.js，而後經過webpack-merge合併兩個配置文件webpack.config.prod.js以下：

const webpack = require('webpack') const merge = require('webpack-merge') const config = require("./webpack.config.js") module.exports = merge(config,{ plugins:[ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }), new webpack.optimize.UglifyJsPlugin({ compress: process.env.NODE_ENV === 'production' }) ] }) console.log("process.env.NODE_ENV 的值是(webpack.config.prod.js)："+ process.env.NODE_ENV)

能夠看到，在這個文件裏，咱們經過webpack.DefinePlugin定義了process.env.NODE_ENV，如今在package.json裏增長一行，並經過--config指定配置文件：

"scripts": {
    "build":"webpack",
    "build-p":"webpack -p",
    "build-prod":"webpack --config webpack.config.prod.js"
  },

而後執行：npm run build-prod 命令行裏有以下輸出：

process.env.NODE_ENV 的值是(webpack.config.js)：undefined process.env.NODE_ENV 的值是(webpack.config.prod.js)：undefined

經過瀏覽器訪問/dist/index.html，控制檯有以下信息輸出：

app test process.env.NODE_ENV 的值是(app.js)：production

此次沒有用webpack -p參數，而是在webpack.config.prod.js裏經過webpack.DefinePlugin定義了process.env.NODE_ENV，取得了至關的效果。

4、在config文件裏獲取NODE_ENV值

解決了在app.js獲取NODE_ENV的值，如何在webpack配置文件裏獲取NODE_ENV的值呢，這樣就能夠根據不一樣的值定義相關的參數了，如上所述，答案是：corss-env，在package.json裏增長一行：

"scripts": {
    "build":"webpack",
    "build-p":"webpack -p",
    "build-prod":"webpack --config webpack.config.prod.js",
    "build-cross-env":"cross-env NODE_ENV=production webpack"
  }

這裏執行：npm run build-cross-env，命令行裏會獲得：

process.env.NODE_ENV 的值是(webpack.config.js)：production

經過瀏覽器訪問/dist/index.html，控制檯有以下信息輸出：

app test process.env.NODE_ENV 的值是(app.js)：undefined

能夠看到，經過cross-env NODE_ENV=production，然信息傳遞給了webpack的配置文件，但app.js並無獲取到。

5、總結

很天然的想到，若是裏要在配置文件裏和業務代碼裏，都獲取到NODE_ENV，那將三、4結合起來：

"scripts": {
    "build":"webpack",
    "build-p":"webpack -p",
    "build-prod":"webpack --config webpack.config.prod.js",
    "build-cross-env":"cross-env NODE_ENV=production webpack",
    "build-cross-env-with-prod":"cross-env NODE_ENV=production webpack  --config webpack.config.prod.js"
  }

運行： npm run build-cross-env-with-prod，命令行中有顯示：

process.env.NODE_ENV 的值是(webpack.config.js)：production process.env.NODE_ENV 的值是(webpack.config.prod.js)：production

經過瀏覽器訪問/dist/index.html，控制檯有以下信息輸出：

app test process.env.NODE_ENV 的值是(app.js)：production