umi使用process配置區分打包開發環境線上環境

前言：目前使用的是umi2，官方文檔不是很明確，所以折騰了下，安裝process，通過它來簡化項目運行、打包時候的不同環境。

目的：只需要直接通過npm run start類似命令來打包出測試環境、正式環境、a環境、b環境、c環境....，不需要手動更改代碼。

使用插件：cross-env

官方傳送門：https://www.npmjs.com/package/cross-env

1、安裝：

npm install --save-dev cross-env

2、修改package.json

根據我們實際要求更改，例如我們想做到：npm run build:prod是打包給正式環境的配置，npm run build:test是打包給測試環境的配置，

  "scripts": {
    "start": "cross-env APP_ENV=test umi dev",
    "start:prod": "cross-env APP_ENV=prod umi dev",
    "start:test": "cross-env APP_ENV=test umi dev",
    "build": "cross-env  APP_ENV=test umi build",
    "build:prod": "cross-env APP_ENV=prod umi build",
    "build:test": "cross-env APP_ENV=test umi build"
  },

 拿上面一句命令來說 

 "build:prod": "cross-env APP_ENV=prod umi build"

我們輸入npm run build:prod時候會運行到對應的prod這一行腳本，此時會給process.env（你要用到的全局變量）添加一個key:value，APP_ENV是自定義字段key，prod是值用來區分哪個環境。

3、進行全局化

上面的這簡單修改能在umi中的配置文件獲取，也能給它添加對應的字段，但是我們需要在普通的xxxxxxxx.js某個文件使用時候會獲取不到，這時候需要全局化配置，通過webpack的define配置。umi已經集成了在里面，所以可以更直接寫define，這樣就全局化配置了。

 

 

 4、開始使用

在需要用到的頁面直接寫判斷即可，根據你個人的環境寫判斷配置，最后輸入對應的npm run xxxxxxx，根據你個人的package.json配置寫法即可。項目中我們就可以愉快的直接敲命令給出不同的運行環境包。

let str=''
if(APP_ENV ==='dev2'){
　　str='123'
}else{
　　str='456'
}

console.log('直接打印查看process.env', process.env);