NODE_ENV和webpack

隨筆前端開發中的 NODE_ENV 的知識以及與 webpack 的關係

NODE_ENV

node.js 原生對象 process 的 env 屬性是個對象（mac環境）：

而咱們常常在框架以及別人類庫的源碼中會見到以下使用方法：

process.env.NODE_ENV
複製代碼

很顯然，NODE_ENV 屬性並不在 process.env 對象上，但經過字面意思（node environment）能夠知道，這意爲 node.js 環境。

用途

express.js 中首次使用該變量，而後推廣、普及至整個前端社區。

它的主要用途是：在使用 node.js 環境執行 JavaScript 腳本時，經過這個屬性來區分不一樣環境（開發、生產、測試等）下的處理（構建、運行等）策略。

它最最最多見的兩個值：

process.env.NODE_ENV === 'development'; // 或簡寫 dev，意爲開發環境
process.env.NODE_ENV === 'production'; // 或簡寫 prod，意爲生產環境
複製代碼

如何使用

在使用 npm 構建的前端項目根目錄下的 package.json 中 scripts 屬性是一個對象，它的每個 鍵名 均可以在命令行（已經安裝了 node.js 並將命令添加至環境變量）中經過 npm run 鍵名 來運行，而真正運行的命令則爲 鍵值：

{
  "scripts": {
    "dev": "webpack --config webpack.dev.config.js"
  }
}
複製代碼

$ npm run dev
複製代碼

實際運行的命令是 webpack --config webpack.dev.config.js，咱們修改 鍵值：

{
  "scripts": {
    "dev": "NODE_ENV=development webpack --config webpack.dev.config.js"
  }
}
複製代碼

這樣就把 NODE_ENV 屬性注入到了 process.env 對象上，而且值爲 development，咱們 只能夠在 webpack.dev.config.js 腳本中以及它所引入的腳本中訪問到 process.env.NODE_ENV，而沒法在其它腳本中訪問。

在 webpack 中的使用

如今的前端工程使用 webpack 可能是用來構建單頁應用，入口腳本文件會以一個樹形的結構引用着項目其它腳本文件。

而 webpack 處理的這個入口腳本文件及其引用的腳本文件都沒法訪問爲 webpack.dev.config.js 腳本提供的 process.env.NODE_ENV 屬性，可是能夠經過 webpack 的插件來讓這些腳本文件都能訪問到 process.env.NODE_ENV：

const webpack = require('webpack');
module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"development"'
    })
  ]
}
複製代碼

最後

謝謝閱讀，若有謬誤，懇請斧正！