React 项目中的环境变量

现代 Web 应用程序大量使用各种类型的 API。为了使它们工作，他们需要密钥或其他一些信息来识别和跟踪每个 API 的使用。持有 API 密钥是环境变量的众多应用之一。通常，它们的主要目的是存储对 Web 开发必不可少的凭据。它还为应用程序开发人员提供了在需要时调整配置数据的单一空间。这样，就无需手动查找和编辑配置数据的每个实例。

起初，React 环境变量可能会令人困惑，尤其是对于没有后端经验的人。但是，打算在大型应用程序上工作的开发人员应该熟悉环境变量。

React 环境变量的规则

请注意，存储在环境变量中的值不是私有的。例如，它们对于存储秘密 API 密钥并不实用。部署应用程序后，环境变量值将在源代码中可见。每次添加环境变量时，都必须在引用存储在其中的值之前重新启动应用程序。

create-react-app 中的环境变量

使用 create-react-app 构建的 React 项目使用 react-scripts 版本@0.5.0 或更高版本支持环境变量，因此不需要外部包。

只要你安装了最新版本的 create-react-app 包，你需要做的就是在主目录中创建一个 .env.local 文件（包含 README.md、package.json 和其他文件）并使用它来定义变量。下面是一个例子：

REACT_APP_CREDENTIAL_DATA = 'some-credential-data'

.env.local 扩展名是必要的，以确保在项目初始化时将文件自动添加到 .gitignore 文件中。

要使用 create-react-app 对环境变量的内置支持，你必须在变量名称前加上 REACT_APP。

没有 create-react-app 的环境变量

如果你有一个没有 react-scripts 的自定义 React 环境，你需要安装一个外部包才能在 React 中使用环境变量。

为此，你可以安装专门为此目的构建的流行的 dotenv 包。

首先，你必须在项目文件夹中打开命令行并安装此包：

npm install dotenv

然后，你必须使其可用并配置设置。将以下代码添加到应用程序：

require('dotenv').config()

完成此操作后，你可以在文件夹中创建一个 .env.local 文件，就像使用 create-react-app 构建的应用程序一样。你还必须以 REACT_APP 前缀开头变量名。