create react app 项目多环境配置

一般来讲，在项目开发中，前端不可避免的会面对多个环境的接口：开发环境、测试环境、生产环境，谁也不会上来就直接面对生产环境的对吧？所以项目中至少会定义一个接口请求的 baseUrl 跟随这些环境来变化。

create-react-app 配置多环境接口

我们可以到 create-react-app 看一看，create-react-app 默认是支持多个环境配置文件的：

• .env：默认。
• .env.local：本地覆盖。除 test 之外的所有环境都加载此文件。
• .env.development, .env.test, .env.production：设置特定环境。
• .env.development.local, .env.test.local, .env.production.local：设置特定环境的本地覆盖。

左侧的文件比右侧的文件具有更高的优先级：

• npm start: .env.development.local, .env.development, .env.local, .env
• npm run build: .env.production.local, .env.production, .env.local, .env
• npm test: .env.test.local, .env.test, .env (注意没有 .env.local )

例如我们部门目前开发流程中只有开发环境和生产环境两种接口（其中，本地开发和测试共用一个环境），

所以，我需要将测试环境下打包时使用的接口地址指定为 env.development中的接口地址，我分别写了两份配置文件 .env.development 以及 env.production，但是根据以上create-react-app 的官方文档，在执行 build 命令时，默认是加载 .env.production 文件中的变量，所以我在测试服务器上执行 npm run build 命令时就会使得接口地址被指定为生产环境的接口地址，这显然不是我想要的。

怎么办呢？

官方文档也给了我们答案——可以使用 dotenv 来做环境变量的管理（dotenv 可将环境变量从 .env 文件加载到 process.env中。）

因为我们要在命令行中使用，所以我们需要使用 dotenv-cli。

话不多说，让我们开始吧～

写好各个环境的配置文件

首先，我们先安装 dotenv 的 npm 包

npm i dotenv-cli -D

然后，我们在项目根目录下，创建并写好各环境下的配置文件。

# .env.development
REACT_APP_BASE_URL='https://test-api.xxx.xxx'

# env.production
REACT_APP_BASE_URL='https://api.xxx.xxx'

修改 package.json 中的 scripts来指定环境

"scripts": {
    "start": "react-app-rewired start",
    "start:prod": "dotenv -e .env.production react-app-rewired start",
    "build:dev": "dotenv -e .env.development react-app-rewired build",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }

这样，当我需要在测试服务器上打包前端代码时，我就可以执行npm run build:dev来指定使用 .env.development中的环境变量了～ 也可以执行 npm run start:prd 来指定使用 .env.production 的环境变量