create-react-app 自定义环境dotenv文件方案

1,416 阅读1分钟

背景

create-react-app默认支持的多环境dotenv文件,可是这个环境经过翻查源代码,确定了是根据环境变量NODE_ENV来声明,这就特么有点受限了, 虽说NODE_ENV你可以随意指定,然而很多第三方包在使用这个NODE_ENV的时候都约定成俗的去使用一些developmentproduction的值,如果我们为了支持更多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+。