UMI+DVA根据开发环境和生产环境不同动态加载变量-阿里云开发者社区

开发者社区> 杭州-田迪生> 正文

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

简介: 你有没有遇到过这样的情况!比如你们有四种(或更多)环境:开发环境(本地调式代码环境)、测试环境(脏数据环境)、预生产环境(无限接近生产环境)、生产环境(正式环境或线上环境)等等环境。而对于不同环境你的静态资源host地址或者你的用户id等等可能是不一样的
+关注继续查看

你有没有遇到过这样的情况!比如你们有四种(或更多)环境:开发环境(本地调式代码环境)、测试环境(脏数据环境)、预生产环境(无限接近生产环境)、生产环境(正式环境或线上环境)等等环境。而对于不同环境你的静态资源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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Android开发学习之使用Toolbar实现不同的Fragment使用不同颜色的标题栏与状态栏
Android开发学习之使用Toolbar实现不同的Fragment使用不同颜色的标题栏与状态栏                                            先看效果图。
2307 0
MaxCompute数据仓库在更新插入、直接加载、全量历史表三大算法中的数据转换实践
2018“MaxCompute开发者交流”钉钉群直播分享,由阿里云数据技术专家彬甫带来以“MaxCompute数据仓库数据转换实践”为题的演讲。本文首先介绍了MaxCompute的数据架构和流程,其次介绍了ETL算法中的三大算法,即更新插入算法、直接加载算法、全量历史表算法,再次介绍了在OLTP系统中怎样处理NULL值,最后对ETL相关知识进行了详细地介绍。
4753 0
《Android游戏开发详解》一2.11 创建新的对象变量
语法的不同之处在于最后一步。要创建一个新的Phone对象,我们必须使用Java的内建关键字new,并且声明我们想要用来创建Phone对象的蓝图,即Phone类。让我们将上面的代码添加到main方法中,如程序清单2.10的第5行所示。
1259 0
Android插件化开发之动态加载技术学习
Android插件化开发之动态加载技术学习 为什么要插件化开发和动态加载呢?我认为原因有三点: 可以实现解耦 可以解除单个dex函数不能超过65535的限制 可以给apk瘦身,比如说360安全卫士,整个安装包才13.
1839 0
NGINX 加载动态模块(NGINX 1.9.11开始增加加载动态模块支持)
NGINX 1.9.11开始增加加载动态模块支持,从此不再需要替换nginx文件即可增加第三方扩展。目前官方只有几个模块支持动态加载,第三方模块需要升级支持才可编译成模块。 tinywan@tinywan:~/nginx-1.
1555 0
9
文章
0
问答
来源圈子
更多
阿里云GTS能力中心(浩鲸智能),从交付的视角探讨数字化转型过程中大型软件开发实践、以及阿里云产品在各行业被集成的案例分享、技术沉淀等内容。敬请关注!
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载