總結一下“NODE_ENV”相關的幾個技術點

​

一. 概念 - node下的全局環境process.env

node中有全局變量process表示目前node程序，process.env包含着關于系統環境的資訊。

但是process.env中并不存在NODE_ENV這個東西。

其實NODE_ENV隻是一個使用者自定義的變量，但是這個NODE_ENV變量語義非常恰當，并且在前端工程化配置中作為判斷生産環境/開發環境的依據是非常自然而友善的事情，因而在前端工程化中逐漸成為一個事實規範。

當我們在服務啟動時配置NODE_ENV,或在代碼中給process.env.NODE_ENV指派，js便能通過process.env.NODE_ENV擷取資訊。

二. node運作環境下的設定與使用

1. 臨時設定 - 在cmd下的node環境下

window: set NODE_ENV=production
linux:  export NODE_ENV=production      

2. 永久設定

window：右鍵(此電腦) -> 屬性(R) -> 進階系統設定 -> 環境變量(N)...
linux:      vim /etc/profile      

3. 常用腳本設定 - 将NODE_ENV=XXXX放到項目package.json的scripts指令中

"scripts": {
    "build-win": "SET NODE_ENV=production && webpack --config build/webpack.config.js",
    "build-linux": "EXPORT  NODE_ENV=production && webpack --config build/webpack.config.js",
　　 "build-mac": "NODE_ENV=production node build/dev-server.js"
  }      

4. 常用腳本設定 - 跨平台方案，第三方插件cross-env

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

使用：

console.log(process.env.NODE_ENV)      

三. webpack打包環境下的設定與使用

DefinePlugin允許我們建立全局變量，可以在編譯時進行設定，是以我們可以使用該屬性來設定全局變量來區分開發環境和正式環境。這就是 DefinePlugin的基本功能。

是以我們可以在webpack.config.js 中添加如下代碼配置全局變量資訊了，因為當webpack進行編譯的時候會全局設定變量；如下代碼：​

module.exports = {
  plugins: [
    // 設定環境變量資訊
    new webpack.DefinePlugin({
      AA: 'aa',
      BB: 'bb',
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
      }
    })
  ]
}      

這樣使用時就與node運作環境下一樣了：​

console.log(process.env.NODE_ENV)      

學習更多技能

請點選下方公衆号

​