Taro多环境配置

Taro项目在开发一定阶段后,就会面临环境部署的问题了,比如本地的开发环境,服务器的测试环境,如果每次打包都手动切换环境的话,实在是太不优雅了。
那么有没有什么办法,可以在打包的时候决定环境,并进行配置呢,答案是有的。

Taro在配置项里,有一个参数defineConstants,这个参数与同名Webpack参数一样,是可以在编译打包的时候,配置一个或多个全局的变量,通过打包参数的判断来切换变量,这样就可以实现多环境多配置的切换了。

首先配置编译时传递的启动参数,这里使用了一个库,cross-env,它的作用是可以跨平台配置编译环境变量,举个例子,在Linux中,可以使用NODE_ENV=prod在执行打包命令前指定配置参数,但在Windows中则需要另外的方式,使用cross-env可以帮助抹平平台之间的差异。

在package.json中,配置buildEnv传递环境变量的参数,这个buildEnv可自定义名称。

1
2
3
// package.json
"build:weapp-prod": "cross-env buildEnv=prod taro build --type weapp"
"build:weapp-dev": "cross-env buildEnv=dev taro build --type weapp"

接下来,在config/index.js中,配置不同环境的变量,格式如下:

需要注意的是,字符串类型需要使用 ‘" "’ 来进行设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const env = {
"dev": {
API_ROOT: '"192.168.0.0"'
},
"prod": {
API_ROOT: '"1.1.1.1"'
}
}[process.env.buildEnv]

module.exports = function (merge) {
// 注入环境变量
config.defineConstants = env;

if (process.env.NODE_ENV === 'development') {
return merge({}, config, require('./dev'))
}
return merge({}, config, require('./prod'))
}

这样在打包的时候,就可以实现全局配置的切换了。在使用时,直接将API_ROOT作为变量名来使用即可,已经是全局变量了。

但如果在ts中,由于没有定义会报红,所以需要特殊处理一下。
打开types/global.d.ts文件,这里是配置各种全局变量的地方,使用declare关键字来定义你的全局变量即可。

1
declare const API_ROOT: string;

这样就不会报错了。

# ,
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×