process.env.NODE_ENV理解

1、理解NODE_ENV

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

 process是node的全局變量，並且process有env這個屬性，但是沒有NODE_ENV這個屬性。

process.env 屬性返回的是一個包含用戶環境信息的對象，它可以區分開發環境或正式環境的依據

2、理解 DefinePlugin 含義

官網解釋的是：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 這個來區分正式環境還是開發環境即可。

 

轉載https://www.cnblogs.com/tugenhua0707/p/9780621.html