UMI+DVA根据开发环境和生产环境不同动态加载变量

2021-08-14 20:57:44

你有没有遇到过这样的情况！比如你们有四种（或更多）环境：开发环境（本地调式代码环境）、测试环境（脏数据环境）、预生产环境（无限接近生产环境）、生产环境（正式环境或线上环境）等等环境。而对于不同环境你的静态资源host地址或者你的用户id等等可能是不一样的

只区分开发环境和生产环境

使用默认的环境变量 process.env.NODE_ENV
运行npm run start

console.log(process.env); // > {NODE_ENV: "development"}
    // NODE_ENV === "development" 开发环境 ; NODE_ENV === "production" 生产环境
    if (process.env.NODE_ENV === "production") {
      // 生产环境需要的操作
      setTitle(t);
    }

多个环境

umi 允许在 .umirc.js 或 config/config.js （二选一，.umirc.js 优先）中进行配置，支持 ES6 语法。
企业开发中通常会区分多个不同的环境，比如开发环境，测试环境，正式环境。不同个环境中需要请求不同的接口。

UMI_ENV

指定覆盖默认配置的配置文件。比如 UMI_ENV=prod umi build，那么则会用 .umirc.prod.js 覆盖 .umirc.js。或者是 config/config.prod.js 覆盖 config/config.js。注意是覆盖而不是替换，.umirc.prod.js 中没有的配置者会使用 .umirc.js 中的配置。

另外，开发模式下 .umirc.local.js 或者 config/config.local.js 中的配置永远是优先级最高的。

编码实战

step1 下载 cross-env 插件

npm install --save-dev cross-env

step2 新建配置文件

根目录下新建此格式的.umirc.参数名.jsjs文件，示例如下

文件内容如下

// .umirc.prod.js 或者 config/config.prod.js
export default {
  define: {
    "process.env": {
      NODE_ENV: 'prod'
    }, // 修改process.env对象数据
    GLOBAL_VAR: "global_var", // 直接增加全局变量
  },
};

step3 修改`package.json`文件

修改后内容如下

 "scripts": {
    "start": "umi dev",
    "build": "umi build",
    "build:test": "cross-env UMI_ENV=test umi build",
    "build:prod": "cross-env UMI_ENV=prod umi build",
    "eslint": "eslint --ext .js --ext .jsx ./src",
    "lint-staged": "lint-staged"
  },

step4 修改js文件，根据环境变量进行不同输出

console.log('GLOBAL_VAR', GLOBAL_VAR) // > global_var
console.log('process.env.NODE_ENV', process.env.NODE_ENV) // > prod

// NODE_ENV === "development" 开发环境 ; NODE_ENV === "production" 生产环境
if (process.env.NODE_ENV === "prod") {
  // 生产环境需要的操作
}

step5 运行命令

命令结构如下npm run build:参数名

npm run build:prod

此处参数名未新建配置文件处的参数名

step6 观察控制台打印

'GLOBAL_VAR', 'global_var'
'process.env.NODE_ENV', 'prod'

项目完整的package.json文件

{
  "name": "hz_dingding_fe",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "umi dev",
    "build": "umi build",
    "build:test": "cross-env UMI_ENV=test umi build",
    "build:prod": "cross-env UMI_ENV=prod umi build",
    "eslint": "eslint --ext .js --ext .jsx ./src",
    "lint-staged": "lint-staged"
  },
  "repository": {
    "type": "git",
    "url": "git@gitlab.iwhalecloud.com:citybrain/hzjwczxt/hz_dingding_fe.git"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@cbd/eslint": "^0.0.60",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.12.1",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^3.5.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-react": "^7.12.4",
    "pre-commit": "^1.2.2",
    "cross-env": "^5.2.0",
    "lint-staged": "^8.1.0"
  },
  "dependencies": {
    "@cbd/fetch-mobile": "^0.3.1",
    "@cbd/icon": "^0.0.101",
    "@cbd/theme": "^0.2.53",
    "@cbd/umirc-dva": "^0.2.54",
    "@cbd/utils": "^0.2.53",
    "antd-mobile": "^2.2.8",
    "classnames": "^2.2.6",
    "dingtalk-jsapi": "^2.7.6",
    "dva": "^2.4.1",
    "query-string": "5",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-helmet": "^5.2.0",
    "react-resizable": "^1.10.1",
    "react-router-dom": "^4.3.1",
    "umi": "^2.4.3",
    "umi-plugin-react": "^1.7.6"
  },
  "prettier": {
    "trailingComma": "es5"
  },
  "lint-staged": {
    "*.{js,jsx}": [
      "eslint --fix",
      "git add"
    ]
  },
  "pre-commit": [
    "lint-staged"
  ]
}

参考资料

react-多环境配置
 UmiJS 配置 define

码农公寓