react script 3.0 环境变量配置

react 环境变量配置

在 react scripts 升级到 3.0 版本后，添加了 env 文件用于环境变量配置，与 vue 类似。其并不是抄袭自 vue, vue 与 react 都是基于 dotenv 这个库来完成这一功能。

react scripts 配置

对于其它的配置可以查看官方文档，本章具体讲解 env 文件的使用。

文档在环境变量一节中具体介绍了如何使用 env 文件进行环境变量配置，大体与 vue 的环境变量配置相同，例如必须以 REACT_APP为前缀，才能够在工程中使用：

REACT_APP_NOT_SECRET_CODE=abcdef

然而并没有讲解如何引用到相应的配置文件, 接下来对此进行配置。

首先安装 env-cmd

yarn add env-cmd -D

然后修改 package.json script 脚本配置。

{
    "scripts": {
        "start": "react-app-rewired start",
        "build": "react-app-rewired build",
        "build:UAT": "env-cmd -f ./.env.uat npm run-script build",
        "build:pro": "env-cmd -f ./.env.production npm run-script build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "lint-fix": "tslint --fix --project ./"
    }
}

首先使用 env-cmd -f ./.env.uat 指定特定的环境变量配置，然后在后面拼接对应的 npm script，就能将特定的环境变量写入当前的进程中。

以上就是 react 最新的环境变量配置方式。