[JavaScript知识库]React 分别打包测试、生产环境的配置

在实际项目开发中，前端会面对多个环境的接口：开发环境、测试环境、生产环境，所以项目中网络请求的 baseUrl 也需要跟随这些环境来变化。

我们一般会使用像 create-react-app 脚手架来做项目的初始化

create-react-app 配置多环境接口，官方文档 默认是支持多个环境配置文件的：.

例如，只有线上和测试环境两种接口，

官方文档也给了我们答案，可以使用 dotenv 来做环境变量的管理

（dotenv 可将环境变量从 .env 文件加载到 process.env中。）

npm install dotenv-cli --save-dev

写好各个环境的配置文件

.env.test

# env.development and test
REACT_APP_BASE_URL='http://test.xxx.xxx'

.env.live

# env.production
REACT_APP_BASE_URL='http://live.xxx.xxx'

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

  "scripts": {
    "start": "react-scripts start",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build": "react-scripts build",
    "build:test": "dotenv -e .env.test react-scripts build",
    "build:live": "dotenv -e .env.live react-scripts build"
  },

当我需要在打包前端代码时，我就可以执行npm run build:test来指定使用 .env.test中的环境变量了～