# 环境变量与配置

URL: https://caijiao.org/react/chapter17/env-vars
Source: docs/react/chapter17/env-vars.md
Description: 环境变量和配置是 React 项目开发中的重要部分，它们帮助我们管理不同环境下的配置，确保开发、测试和生产环境之间的区别。本文将介绍如何在 React 中使用环境变量，并通过配置文件来管理不同环境的设置。

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

## 使用环境变量

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

### 创建环境变量

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

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

### 访问环境变量

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

```javascript
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_` 开头。否则，这些变量不会被嵌入到构建中。比如：

```txt
REACT_APP_API_KEY=your-api-key
```

## 配置文件管理

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

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

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

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

export default config;
```

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

```javascript
import config from "./config";

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

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

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

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

```javascript
import dotenv from "dotenv";

dotenv.config();
```

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

```javascript
console.log(process.env.REACT_APP_API_URL);
```

## 总结

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

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

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