NODE_ENV和webpack

zhCN_超發表於2018-01-05
Web

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

NODE_ENV

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

NODE_ENV和webpack
而我們經常在框架以及別人類庫的原始碼中會見到如下使用方法：

process.env.NODE_ENV
複製程式碼

很顯然，NODE_ENV 屬性並不在 process.env 物件上，但通過字面意思（node environment）可以知道，這意為 node.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"'
    })
  ]
}
複製程式碼

最後

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

相關文章