React使用.env.*进行环境部署

在实际开发过程中，我们需要在不同的环境下进行测试。我们可能需要使用 mock 或者灵活修改后端请求 IP 等。为了方便测试，我们需要创建不同的配置文件进行管理，以达到迅速切换运行环境的目的。

React的NODE_ENV

首先，我们来认识一下React常用的运行模式并输出他们的NODE_ENV来看一下。

"scripts": {
  "start": "react-scripts start", // development
  "build": "react-scripts build", // production
  "test": "react-scripts test" // test
}

这里我们开发中最常用的就是 start 命令。那么我先创建 .env.development 文件，并为 NODE_ENV 赋值。运行后发现，NODE_ENV 并没有发生变化。

那是因为，create-react-app 创建的 React 项目，NODE_ENV 是不可更改的。

那么，我们如何判断当前运行的环境呢？这里我们要用到的工具就是dotenv了。

dotenv

dotenv官方网站：https://github.com/entropitor/dotenv-cli

安装

NPM

$ npm install -D dotenv-cli

Yarn

$ yarn add dotenv-cli --dev

使用

首先我们来创建一个自定义的 .env 文件，取名为 .env.backserver 。我这个文件是为了进行前后端联调的配置文件。

# .env.backserver
# App当前运行环境
REACT_APP_ENV = 'backserver'

同时我们为.env.development也创建该变量。

# .env.development
# App当前运行环境
REACT_APP_ENV = 'development'

然后我们在 package.json 中增加一行脚本：

"backserver": "dotenv -e .env.backserver react-scripts start"

最后，我们来测试一下结果。分别运行 npm run start 和 npm run backserver。运行后发现，REACT_APP_ENV 这个变量生效了。如此我们就可以根据该变量来自由定制测试的运行环境了。

如果你还需要别的变量，只需要采用 REACT_APP_(name) 的命名格式创建就可以了。

你可以通过 process.env.REACT_APP_(name) 对你创建的变量进行访问。