环境变量与配置

在 React 项目中，环境变量用于存储敏感信息或在不同环境下做不同配置的值。环境变量可以帮助你在开发、测试和生产环境之间灵活地管理项目配置。React 提供了内置的环境变量支持，特别是在创建 React 应用时，React 会根据不同的环境进行不同的配置。

使用环境变量

React 使用 .env 文件来定义环境变量。你可以在项目根目录创建不同的 .env 文件，分别管理不同环境下的变量，如 development, production, 和 test。

创建环境变量

在根目录下创建一个 .env 文件，里面可以存放你的环境变量，例如：

REACT_APP_API_URL=https://api.example.com
REACT_APP_ENV=development

访问环境变量

你可以在 React 项目中通过 process.env 来访问这些环境变量。例如：

const apiUrl = process.env.REACT_APP_API_URL;
console.log(apiUrl);  // 输出： https://api.example.com

多环境支持

你可以创建不同的环境变量文件，以适应不同的环境需求：

• .env：默认环境变量文件，适用于所有环境
• .env.local：本地开发环境专用，优先级最高
• .env.development：开发环境变量
• .env.production：生产环境变量
• .env.test：测试环境变量

React 会根据当前的环境自动加载相应的 .env 文件。

环境变量的命名规则

React 要求所有自定义环境变量的名称必须以 REACT_APP_ 开头。否则，这些变量不会被嵌入到构建中。比如：

REACT_APP_API_KEY=your-api-key

配置文件管理

除了环境变量，项目中还常常使用配置文件来管理一些更复杂的设置。常见的配置文件包括：

• config.js：一般用于存放一些需要在应用程序中全局访问的配置。
• webpack.config.js：用于 Webpack 配置。
• .babelrc：Babel 配置文件。

你可以在这些配置文件中根据不同环境来设置特定的值。例如，在 config.js 文件中，你可以根据环境变量来调整 API 地址：

const config = {
  apiUrl: process.env.REACT_APP_API_URL || "https://default-api.com",
  environment: process.env.REACT_APP_ENV || "development"
};

export default config;

在应用中使用时，可以根据环境变量来动态加载配置：

import config from './config';

console.log(config.apiUrl);  // 输出相应环境的 API 地址

使用第三方库管理环境变量

一些项目可能需要使用第三方库来管理环境变量或配置，例如 dotenv。虽然 React 内部已经有自动加载 .env 文件的机制，但你仍然可以在项目中自定义更复杂的环境配置。

例如，使用 dotenv 来加载环境变量：

import dotenv from 'dotenv';

dotenv.config();

然后，你就可以像上面一样访问环境变量：

console.log(process.env.REACT_APP_API_URL);

总结

环境变量和配置在 React 开发中非常重要，能够帮助我们根据不同的环境调整应用的行为。通过使用 .env 文件和配置文件，我们可以轻松地管理和访问这些值。

• 使用 .env 文件来管理环境变量。
• 根据不同的环境创建不同的配置文件。
• 在 React 中通过 process.env 访问环境变量。
• 配置文件可以用来存放更复杂的配置，提升灵活性。

通过良好的环境变量和配置管理，你可以确保 React 项目在不同环境下能够平稳运行。