在 CRA 中使用 .env

在 React 项目中，我们经常需要使用一些环境变量来配置我们的应用程序。这些变量可能包括 API 地址、应用程序名称等等。对于常规的项目，我们可能会把这些变量硬编码到我们的代码中。但是，当应用程序需要部署到不同的环境时，这种做法就会变得困难和容易出错。

为了解决这个问题，我们可以使用 .env 文件来管理我们的环境变量。.env 文件是一个文本文件，其中包含应用程序运行所需的所有环境变量。在 React 项目中，我们可以使用 dotenv 库来读取这些变量。

如何在 CRA 中使用 .env 文件

CRA 是 Create React App 的缩写，是一个 React 项目的脚手架工具。使用 CRA ，可以快速创建一个基本的 React 项目。

下面是如何在 CRA 中使用 .env 文件的步骤：

1. 首先，在项目的根目录下创建一个名为 .env 的文件。在这个文件中，我们可以定义我们需要的环境变量。比如：

REACT_APP_API_URL=https://api.example.com
REACT_APP_APP_NAME=My Awesome App

这里我们定义了两个环境变量，一个是 REACT_APP_API_URL ，一个是 REACT_APP_APP_NAME 。

2. 然后，在我们的 React 组件中，我们可以使用 process.env 来访问这些环境变量。注意，我们需要把我们的变量名都以 REACT_APP_ 开头，这是 CRA 的规定。比如：

const apiUrl = process.env.REACT_APP_API_URL;
const appName = process.env.REACT_APP_APP_NAME;

这样，我们就可以在我们的组件中使用这些环境变量了。

关于 .env 文件的一些注意事项

在使用 .env 文件时，有一些注意事项需要我们知道：

• 我们可以使用 # 来注释我们的环境变量。

• 不要将 .env 文件提交到版本控制系统中。这是因为我们的环境变量可能包含敏感信息，比如 API 密钥等。如果我们把他们提交到 Git 或者其他代码管理工具中，会有安全风险。

• 我们可以创建多个 .env 文件，以便在不同的环境中使用不同的变量。比如，我们可以创建 .env.development 和 .env.production 两个文件，分别用于开发和生产环境。

• 在使用环境变量时，我们需要非常小心。不要让我们的应用程序依赖于这些变量，因为它们可能会在我们不知道的情况下被修改或者删除。

总结

使用 .env 文件可以让我们更方便地管理我们的环境变量，避免了硬编码的麻烦。在 CRA 中，我们只需要在根目录下创建一个 .env 文件，就可以方便地使用环境变量了。但是，在使用 .env 文件时，我们也需要注意安全性和可靠性。