react——环境变量（二）

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第21天，点击查看活动详情。

2、多环境设置：

项目的根目录添加一系列名为 .env的文件，里面写上变量名和值，打包后，可以在js代码中通过process.env.REACT_APP_XXX读取到对应文件中的变量值。

注：文件中的变量必须以REACT_APP_ 开头，其他的react不识别。

说明：此功能适用于 react-scripts@0.5.0 及更高版本，可以通过以下命令更新：

npm install --save --save-exact react-scripts@1.1.4

2.1）默认可以使用哪些 .env 文件？

默认，可以在项目根目录下建立如下文件：

.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文件后，需要重新执行npm start后，代码中获取变量才能生效。

看个示例：

1）在项目根目录建立两个文件：

• .env.development文件，内容：REACT_APP_TEST=development
• .env.production文件，内容：REACT_APP_TEST=production

2）在js中通过如下代码访问变量：

function App() {
  return (
    <div className="App">
      {process.env.REACT_APP_TEST}<br/>
    </div>
  );
}
 
export default App;

3）访问变量值：

• 执行npm start后，访问页面，得到的变量值为：development
• 执行npm build后，再执行serve -s build，访问页面，得到的变量值为：production

2.2）dotenv管理环境变量：

1）在项目根目录建立三个文件：

.env.development文件，内容：REACT_APP_TEST=development .env.stage文件，内容：REACT_APP_TEST=stage .env.production文件，内容：REACT_APP_TEST=production 2）在js中通过如下代码访问变量：

同上

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

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