cross-env 根據環境打包

cross-env GitHub地址

React 環境變量

開發中請求后端接口時，會有一個公共的請求地址（服務器域名地址 === BASEURL）。
通常情況下，開發環境、線上環境的 BASEURL 接口地址是不一樣的（開發環境服務器，uat服務器，生產服務器），所以不同環境打包時就需要切換到不同環境的服務器地址。（手動修改可以，但是太麻煩，而且容易忘記）所以，正確的寫法應該是，根據不同的環境變量來自動確定不同的 BASEURL。

NODE_ENV 內置環境

create-react-app 創建項目時，內置的環境變量有三個，JavaScript代碼中可以直接通過 process.env.NODE_ENV 來讀取，無需引入。

三個環境變量依次對應三個運行命令：

npm start 時, NODE_ENV 的值為 development

npm run test 時, NODE_ENV 的值為 test

npm run build 時, NODE_ENV 的值為 production

如果你的環境只有 3 個，那內置環境足夠，但是有時候我們需要的環境可能不止這幾個。（尤其是，同一套應用給不同的用戶去部署的時候，常見於外包項目）
那就需要我們自己來配置不同的環境。此時可以用到 cross-env 它的設計是為了定義全平台兼容的環境變量命令，因為 Windows 在設置環境變量的命令會出現阻塞問題

安裝

npm install --save-dev cross-env

使用

{
  "scripts": {
    "build": "umi build",
    "build:tom": "cross-env HOST=tom umi build",
    "build:jerry": "cross-env HOST=jerry umi build",
  },
}

然后在需要用到的地方(比如：defaultSetting.js)進行判斷即可：

let baseUrl = '';
let HOST = process.env.HOST;
if (HOST === 'tom') {
  baseUrl = '/www.tom.com/';
} else if (HOST === 'jerry') {
  baseUrl = '/www.jerry.com/';
} else {
  baseUrl = '/www.tomAndjerry.com/';
}

export default {
  baseUrl,
};

運行

運行 npm run build:tom 會得到 baseUrl = '/www.tom.com/'

運行 npm run build:jerry 會得到 baseUrl = '/www.jerry.com/'

最后的 else 其實是防備的 npm run build 和 npm start 等不會設置這個變量的情況。