ReactJS中的环境变量。

如果你正在使用 ReactJS 并访问一些 API 接口，你可能已经接触过环境变量。在本教程中，我将带你了解如何使用环境变量。

假设：您熟悉Create React App，并且您正在使用它来创建您的 React 应用程序。

为什么需要环境变量

1. 根据您的环境（例如生产环境、开发环境或测试环境等）自定义变量。

2. 用于存储 API 密钥和密码等高度敏感信息，这些信息不应纳入版本控制系统。

Create React App 支持自定义环境变量，无需安装其他软件包。

添加环境变量的两种方法

1. 使用.env文件（这是我们将要采用的方法）。
2. 通过 shell（临时的，持续时间与 shell 会话持续时间相同，并且因操作系统类型而异）。

使用以下方式定义环境变量.env

步骤 1：在应用程序的根文件夹中，创建一个名为 . 的文本文件.env。您的工作目录结构将如下所示：

my-react-app/ 
 |-node-modules/
 |-src/
 |-public/
 |-.env
 |-gitignore
 |-package.json
 |-package.lock.json.
 |-README.md

步骤 2：REACT_APP创建自定义变量。Create React App (CRA) 会强制每个自定义变量添加前缀。
请注意，没有前缀的变量在打包过程中会被忽略。如果您想了解更多关于 CRA 如何实现此功能的信息，请查看此处的REACT_APP文档。 变量应如下所示：

REACT_APP_CLIENT_ID=12345
REACT_APP_KEY=aaddddawrfffvvvvssaa

步骤 3：在你的 React 应用中访问它们。你可以打印它们，也可以将它们赋值给其他变量，但它们仅在你的应用中可用（意味着它们的值无法更改）。

import React from 'react';

function App() {
  console.log(process.env.REACT_APP_CLIENT_ID);//printing it to console
  console.log(process.env.REACT_APP_KEY);//printing it to console

  return (
    <div className="app">
      <p>{process.env.REACT_APP_KEY}</p>//printing it to screen
    </div>
  );
}

export default App;

步骤 4：有一个名为 `<mode>` 的内置环境变量NODE_ENV。您可以通过 `<mode>` 命令访问它process.env.NODE_ENV。该变量会根据您当前所处的模式而变化。
当您运行 ` <mode>` 时npm start，它等于“development”；
当您运行 `<mode> ` 时，npm test它等于“test”；
当您运行`<mode>` 时npm run build，它等于“production”。
更多使用案例，请参阅这篇精彩的教程。

第五步：打开.gitignore文件。我喜欢把 .env 和其他环境变量放在 #misc 目录下，如下所示。

# dependencies 
/node_modules 
# testing 
/coverage 
# production 
/build 
# misc 
.DS_Store 
.env    #<--------Put the custom env files here 
.env.local 
.env.development.local 
.env.test.local 
.env.production.local 
npm-debug.log* 
yarn-debug.log* 
yarn-error.log*

为什么按照这些步骤操作后仍然不起作用🤔？

• 请确保在每个变量名前都使用了前缀 REACT_APP。
• 确认.env文件中的变量名与 js 文件中的变量名一致。例如，.env 文件中的 REACT_APP_KEY 与 process.env.REACT_APP_KEY 是否一致。
• 如果开发服务器正在运行，请先停止它，然后使用 `npm start` 重新启动。我之前也遇到过这个问题（变量未定义错误）。
• 每次更新 .env 文件后，都需要停止服务器并重新运行，因为环境变量仅在构建期间更新（变量未定义错误）。
• 去掉变量值中的引号。

有关在 Create React App 中使用环境变量的官方文档，请参阅此处。