Taro项目在开发一定阶段后,就会面临环境部署的问题了,比如本地的开发环境,服务器的测试环境,如果每次打包都手动切换环境的话,实在是太不优雅了。
那么有没有什么办法,可以在打包的时候决定环境,并进行配置呢,答案是有的。
Taro在配置项里,有一个参数defineConstants
,这个参数与同名Webpack参数一样,是可以在编译打包的时候,配置一个或多个全局的变量,通过打包参数的判断来切换变量,这样就可以实现多环境多配置的切换了。
首先配置编译时传递的启动参数,这里使用了一个库,cross-env
,它的作用是可以跨平台配置编译环境变量,举个例子,在Linux中,可以使用NODE_ENV=prod
在执行打包命令前指定配置参数,但在Windows中则需要另外的方式,使用cross-env
可以帮助抹平平台之间的差异。
在package.json中,配置buildEnv传递环境变量的参数,这个buildEnv可自定义名称。
1 | // package.json |
接下来,在config/index.js
中,配置不同环境的变量,格式如下:
需要注意的是,字符串类型需要使用 ‘" "’ 来进行设置。
1 | const env = { |
这样在打包的时候,就可以实现全局配置的切换了。在使用时,直接将API_ROOT
作为变量名来使用即可,已经是全局变量了。
但如果在ts中,由于没有定义会报红,所以需要特殊处理一下。
打开types/global.d.ts
文件,这里是配置各种全局变量的地方,使用declare关键字来定义你的全局变量即可。
1 | declare const API_ROOT: string; |
这样就不会报错了。