React 中环境变量的优雅管理

了解如何使用 Create React App (CRA) 管理 React 应用程序中的环境变量，从而实现开发、测试和生产环境之间的无缝过渡。

Create React App 简介

Create React App 是一个由 Facebook 创建的脚手架工具，旨在简化 React 应用程序的创建和开发。它提供了一组预先配置的工具和配置，使开发人员可以专注于构建应用程序的逻辑，而无需担心底层设置。

环境变量在 React 中的作用

环境变量是可以在应用程序运行时访问的键值对。它们通常用于存储与应用程序的配置或行为相关的敏感信息，例如 API 密钥、数据库连接字符串和应用程序设置。

在 React 应用程序中，环境变量可用于存储诸如以下信息：

• 应用程序名称
• API 端点
• 日志级别
• 特性标志

通过将这些值存储在环境变量中，开发人员可以轻松地在不同环境（例如开发、测试和生产）之间切换，而无需修改应用程序代码。

使用 CRA 管理环境变量

CRA 提供了两种管理环境变量的方法：

1. 使用 .env 文件： .env 文件是一个文本文件，用于存储环境变量。CRA 会自动将 .env 文件中的变量加载到应用程序中。.env 文件不应提交到版本控制系统，因为它可能包含敏感信息。
2. 使用 process.env： process.env 是一个 JavaScript 对象，包含 Node.js 进程的环境变量。CRA 会将应用程序的环境变量添加到 process.env 中，从而允许开发人员从代码中访问它们。

使用 .env 文件

要使用 .env 文件，请在项目根目录中创建一个名为 .env 的文件。然后，使用以下格式添加环境变量：

KEY=VALUE

例如：

REACT_APP_API_URL=https://my-api.com
REACT_APP_LOG_LEVEL=debug

注意： 环境变量名称应以 REACT_APP_ 前缀开头，以防止与应用程序的本地状态冲突。

使用 process.env

要从代码中访问环境变量，可以使用 process.env 对象。例如：

const apiUrl = process.env.REACT_APP_API_URL;
const logLevel = process.env.REACT_APP_LOG_LEVEL;

区分不同环境

在大型应用程序中，通常需要在不同的环境（例如开发、测试和生产）之间进行区分。CRA 提供了以下方法来区分不同环境：

1. 使用不同的 .env 文件： 每个环境都可以有自己的 .env 文件。这允许开发人员为每个环境指定不同的环境变量。
2. 使用环境变量： CRA 会将 NODE_ENV 环境变量设置为当前环境的值（例如 development、test 或 production）。开发人员可以使用此变量来根据环境动态调整应用程序的行为。

最佳实践

管理 React 中的环境变量时，请遵循以下最佳实践：

• 将敏感信息（例如 API 密钥和数据库连接字符串）存储在环境变量中。
• 避免将环境变量硬编码到应用程序代码中。
• 使用前缀（例如 REACT_APP_）来防止环境变量与应用程序的本地状态冲突。
• 使用不同的 .env 文件来区分不同的环境。
• 考虑使用环境变量管理库来简化环境变量的管理。

结论

管理 React 应用程序中的环境变量对于在不同环境之间实现无缝过渡至关重要。Create React App 提供了两种简单的方法来管理环境变量：使用 .env 文件和使用 process.env。遵循最佳实践并充分利用 CRA 的功能，开发人员可以创建健壮且可维护的 React 应用程序。