背景
create-react-app默认支持的多环境dotenv文件,可是这个环境经过翻查源代码,确定了是根据环境变量NODE_ENV来声明,这就特么有点受限了, 虽说NODE_ENV你可以随意指定,然而很多第三方包在使用这个NODE_ENV的时候都约定成俗的去使用一些development和production的值,如果我们为了支持更多dotenv文件去指定其他NODE_ENV的值,可能会带来更多的其他问题,所以我们开拓需要其他的方案。
vue-cli的启发
来吧,互抄啊,互相伤害啊。
我们借鉴了vue-cli对于dotenv文件的处理思想,vue-cli的项目可以在启动/构建命令的时候通过指定--mode <name>参数,去加载指定的.env.{modeName}文件,这样在不侵入修改NODE_ENV的同时,能够满足我们编写自定义环境的dotenv文件,所以,我们尝试fork了一份react-scripts项目来实现这个功能,(不得不吐槽,我得fork一整个create-react-app项目)。
约定的环境变量APP_ENV
我们就不魔改create-react-app的参数了,所以无侵入的添加额外可选的环境变量APP_ENV。
比如我们的启动命令:
# 默认
$ react-scripts start
# 指定自定义的环境
$ APP_ENV=dev react-scripts start
通过传递APP_ENV,就能加载.env.{APP_ENV}的dotenv文件作为项目指定环境的环境变量设置,当然为了考虑其他平台,我们还是推荐安装cross-env。
$ npm i -D cross-env
$ cross-env APP_ENV=dev react-scripts start
食用姿势
$ create-react-app <project-name> --scripts-version=@vegawong/react-scripts [options]
注: 目前支持create-react-app版本3.2+。