umi多环境配置的实现

如何实现Umi多环境配置在实现

在生产部署时，经常需要用到多环境变量的配置，特别是使用持续集成时，经常有好及格环境、测试、预生产、生产。

使用umi开发时，通过process.env.NODE_ENV可以判断出，当前是dev模式，还是生产模式

development模式即：开发模式
production模式即：生产模式

只要是编译出来的，都是production模式，这是，就不好区分测试、预生产、生产了，怎么办呢？
umi.js提供自定义多种umi.js配置文件的方式可解决

在项目根目录下，默认使用.umirc.js中的配置文件
可以创建多个.umirc..js 如 .umirc.prod.js .umirc.test.js 等，创建后，就可根据需要设置相关配置，那如何使用某个文件的配置呢？

这时，就需要在package.json 脚本中声明使用的配置文件了，如何声明呢？

  "scripts": {
    "build": "cross-env UMI_ENV=test umi build",
    "build:prod": "cross-env UMI_ENV=prod umi build",
    "lint:js": "eslint --ext .js src",
    "lint:style": "stylelint \"src/**/*.less\" --syntax less",
    "lint:stylefix": "stylelint \"src/**/*.less\" --fix",
    "start": "umi dev",
    "test": "cross-env BABELRC=none umi test",
    "precommit": "lint-staged"
  },

如上所示， 使用cross-env UMI_ENV=test umi build 即 UMI_ENV= markName就是对应的.umirc..js。

需要注意： 如没有安装 cross-env则需要先安装 yarn add cross-env --dev

如何自定义配置属性

需要注意的是，配置文件中的配置项必须是合法的可配置项属性，如何没有该属性是会报错的，如何使用子定义的配置项呢？

.umirc.js

export default {
	publicPath: '/www',
	define: {
	  'myVar': '/myLib'
	}
}

document.ejs中，如何使用自定义配置属性

如上umirc.js中的配置项，在模板页面中引用如下

<script src="<%= context.config.publicPath %>/myIcon/iconfont.js">script>
<script src="<%= context.config.define.myVar %>/my.js">script>