1. 程式人生 > >Node 環境變量 process.env.NODE_ENV 之webpack應用

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

global === module out 主題 解決 pts uglifyjs 因此

轉載來源: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

一、接下來進入主題,開始配置 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

> [email protected] 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 也未定義

二、通過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並未獲取到~)

三、通過 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,取得了相當的效果。

四、在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並沒有獲取到。

五、總結

很自然的想到,如果裏要在配置文件裏和業務代碼裏,都獲取到NODE_ENV,那將3、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

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