如何設置process.env.NODE_ENV生產環境模式

Posted on by

在開始之前我先強調一下： process.env.NODE_ENV默認隻有兩種狀態即development和production，development指代本地開發即localhost環境（本地的開發），而production代表發佈在任何服務上的服務（不管是dat、uat還是生產環境），node是不知道你服務是測試還是正式，除非你手動指定。通常認為都是線上環境。所以可以這樣認為development代表本地開發環境，production代表線上環境（包括dat、uat和生產環境等）

我為什麼會強調這一點呢？

因為有人居然用process.env.NODE_ENV中的development來代表dat，uat等線上的測試環境，所以特別強調一下，development代表本地的開發環境。

最近系統接入瞭公司的單點登錄，為瞭登陸成功後再跳回系統的主頁面，又申請瞭測試和沙箱的域名（之前都是直接用IP登的），本地開發是配置的host。接入之後發現瞭一個非常麻煩的點就是給單點登錄傳的跳轉地址每次都要修改，開發的時候要寫成開發的域名，測試的時候要改成測試的域名，進沙箱的時候要改成跳轉沙箱的域名，上線的時候又要改成線上的域名。特別是在測試階段，開發測試來回切換，不勝其煩。
於是就想把它寫成配置文件，根據不同環境加載不同的配置，這樣就不用來回改瞭。這個時候，process.env就跳入瞭腦海。

扒一扒process.env

process對象是全局變量，它提供當前node.js的有關信息，以及控制當前node.js的有關進程。因為是全局變量，它對於node應用程序是始終可用的，無需require()。

既然process都是一個對象瞭，env自然是它的一個屬性，這個屬性返回包含用戶環境信息的對象。在終端輸入node後，在輸入process.env可以看到打印出來的信息。

主角出場 process.env.NODE_ENV

NODE_ENV不是process.env對象上原有的屬性，那它是怎麼添加上的呢？

先舉個例子：

在package.json中，如下：

{
  "name": "yun-nobile",
  "version": "2.0.0",
  "description": "太保標準移動端產品2.0，基於vue",
  "main": "yunprod.js",
  "scripts": {
    "build": "cross-env NODE_ENV=production node yunprod.js build",
    "dev": "node yunprod.js dev"
  }
  ...
}

在我們執行 npm run build 腳本命令時，會執行cross-env NODE_ENV=production node yunprod.js build，把NODE_ENV設置為production，所以 process.env.NODE_ENV就被設置為production瞭 。

所以 process.env.NODE_ENV是我們執行腳本命令時添加上去的一個全局環境變量。

process.env.NODE_ENV用來確定當前所處的開發階段。一般生產階段設為production，開發階段設為develop，然後在腳本中讀取process.env.NODE_ENV。
運行腳本時，可以這樣改變環境變量, 在package.json文件的scripts裡面添加命令：

NODE_ENV=production node build.js

但是這個命令使用Windows的同學拉下代碼後就報錯瞭，因為Windows上面設置的方式不一樣

set NODE_ENV=production node build.js

但是不同電腦上不同的設置肯定是不行的呀，這個時候cross-env趕來救場瞭。
cross-env可以跨平臺的設置和使用環境變量

npm install --save-dev cross-env

接下來我們就可以通過cross-env來設置瞭

cross-env NODE_ENV=production node build.js

這樣設置之後，我們可以在腳本中使用process.env.NODE_ENV瞭，但是不能在模塊中使用，要想在模塊當中直接使用，我們還需要一些配置

在 webpack 4+ 中，你可以使用 mode 選項：

module.exports = {
  mode: 'production'
}

但是在 webpack 3 及其更低版本中，你需要使用 DefinePlugin：

var webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}

這樣就可以直接使用啦_
現在我們要在模塊中根據環境變量來配置不同的url瞭

let url = '';
 if (process.env.NODE_ENV === 'testing') {
   url = 'http://my.test.cn';
 } else if (process.env.alpord === 'alpord') {
   url = 'http://my.alpord.cn';
 } else if (process.env.NODE_ENV === 'production') {
   url = 'http://my.product.cn';
 } else {
   url = 'http://my.develop.cn';
 }

或者是

let url = '';
process.env.NODE_ENV === 'production'?url = 'http://my.product.cn':url = 'http://my.test.cn';

到此這篇關於如何設置process.env.NODE_ENV生產環境模式的文章就介紹到這瞭,更多相關process.env.NODE_ENV設置生產環境模式內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：