了解如何在 React 中使用环境变量文件
了解如何在 React 中使用环境变量文件
您有没有想过什么是环境变量以及在构建项目时何时需要它们。
环境变量在保持敏感数据安全和将数据存储在一个地方并在应用程序的不同部分使用它方面发挥着重要作用。
因此，在本文中，我将解释您需要了解的有关环境变量的所有信息，它们为何重要以及何时需要使用它们，当然我将向您展示如何在 React.js 应用程序中使用环境变量
因此，以下是我们将在本文中介绍的内容的细分：
- 什么是环境变量？
- 什么时候应该使用环境变量
- 如何在 React 中创建和使用环境变量
- 结论。
什么是环境变量？
在使用 React 和 Vue 等 JavaScript 框架时，使用环境变量是一种流行的做法。环境变量只是一个文件，它允许您将 API 密钥和其他敏感数据等内容作为值存储在您定义的变量中。环境变量还让您可以灵活地设置变量值在不同模式下的方式。
例如，如果您以前使用过 API，您会知道在向端点发出请求之前，您需要提供一个 API 密钥来进行身份验证以处理您的请求，因此不必总是将这些 API 密钥复制并粘贴到您需要发出请求的每个文件，您都可以将它们存储在环境变量文件中，然后从那里提供它们。
因此，环境变量顾名思义就是存储变量。这些存储在环境变量中的变量包含 API 密钥和其他敏感数据等值。
什么时候应该使用环境变量
为了让您首先使用某些东西，您需要了解何时需要它。
因此，在使用和环境变量的情况下，实际上有两个主要场景需要使用它，它们是，当您想要存储将基于模式（开发或生产模式）具有特定值的环境特定数据时) 项目是，并且在存储敏感数据时。
软件开发涉及多个环境设置。例如，您将拥有一个生产环境、一个开发环境、一个测试环境、一个 QA、一个登台环境，并且列表还在继续。
在每种环境中，您可能需要为单个变量显示不同的值。
例如，在生产模式下，您可能希望值有所不同，而在开发模式下，您可能希望具有不同的值。
那么在这种情况下，有些人可能会使用条件语句，但这根本不能真正解决您的问题。
如果您能够在单独的文件中存储和管理更改，然后将该文件中的变量调用到您想要的任何文件中，该怎么办。
不用多行代码说明不同环境的条件，您可以在环境变量文件中包含该条件，然后通过调用变量在需要它们的地方使用这些值。
第二种情况是一种流行的情况。例如，在使用 React.js 时，您可能使用过 API，而这些 API 需要使用访问令牌、API 密钥和其他身份验证数据。当这些数据直接写入我们应用程序的代码库时，它们是不安全的。
您实际上可以做的是创建一个环境变量文件，您可以在其中将这些数据存储到一个变量中，然后在您的代码库中调用它们并使用它们发出 API 请求。
因此，每当您要在应用程序中存储一些敏感数据时，您都可以使用环境变量来做到这一点，以使您处于更安全的一面。
而且，如果您觉得变量的值需要根据项目的环境进行更改，那么您可以随意使用环境变量。
如何在 React 中创建和使用环境变量
到目前为止，我们一直在讨论什么是环境变量以及它们可以用来做什么，但我们还没有讨论它们是如何使用的。
因此，在本节中，我们将通过一个使用 React.js 应用程序的实际示例来看看如何使用环境变量。
要使用环境变量，您首先必须在项目文件夹的根目录中创建一个 .env 文件。也就是说，如果您是 React 开发人员，它应该与您的 src 文件夹位于同一目录中。因此，在深入了解更多细节之前，让我们首先创建我们的 React 应用程序。
在您希望创建 React 应用程序的目录中运行以下命令。
好的，这将为您创建一个具有默认设置的空 React 项目，您可以使用以下命令在您选择的任何代码编辑器中为此打开一个工作区
您的应用程序应该有一个 App.js 文件，其中将包含当您访问 localhost3000 时将显示给您的 UI。
但是现在我们不需要那个 UI，所以我们可以做的是从 App.js 中删除 header 标签并在 div 中添加一个 h1 标签。
因此，您的 App.js 文件应如下所示：
默认情况下，当我们使用 create-react-app 包创建 React 应用程序时，React 会为我们提供一个环境变量。那是 NODE_ENV 变量。该变量告诉我们当前所处的模式。
例如，如果您使用启动脚本来启动您的 React 应用程序，您将处于开发模式（即，如果您运行 npm start 或 yarn start 命令），如果您运行构建命令（即 npm run build），您将处于生产模式，因此 NODE_ENV 变量将根据我们运行的命令向我们显示我们拥有的内容。
要调用 NODE_ENV 环境变量或任何环境变量，您必须使用 process.env。 变量的名称。 这里的变量名是保存我们值的变量的名称。
所以现在为了测试让我们通过添加下面的代码来调用 h1 标签中的 NODE_ENV 变量
如果您保存文件并在项目目录中运行 npm start，您将被带到 localhost3000，然后您应该会看到如下内容：
这是因为我们目前处于开发模式。如果您处于构建模式，您应该会在浏览器中看到构建
现在假设您想调用条带 API，并且在开发模式下您想使用测试 API 密钥，它允许您使用假卡号测试您的应用程序，然后在生产模式下您想使用原始 API需要原始银行详细信息的密钥。
好吧，您可以决定使用条件语句来检查您的应用程序是处于生产模式还是开发模式，然后使用提到的任何 API 密钥，但这不是一个可行的解决方案，因为它要求您在任何地方都使用这个条件语句您发出 API 请求。
更好的解决方案是创建一个环境变量，该变量将根据您所处的环境调用任何 API 密钥。为此，您必须先创建一个 .env 文件。
因此，创建您的 .env 文件并在其中创建一个变量并在 React.js 应用程序中创建一个环境变量，您必须使用前缀 REACT_APP 后跟 变量的名称。 这里的变量名代表您希望变量具有的名称。
所以在这个例子中，我将使用 MY_API_KEY 变量名，你可以使用任何你喜欢的变量名，但请记住以前缀 REACT_APP 开始命名。
因此，使用以下代码创建变量并为其赋值：
要在应用程序的其他部分调用环境变量，您必须使用 process.env。 变量的名称 .因此，只需复制变量名称并在 App.js 中用它替换 NODE_ENV。
现在您必须停止本地主机服务器的运行，然后再次运行 npm start，这是为了确保 React 捕获我们的新环境变量文件并在浏览器中显示我们在其中的内容。
如果您这样做，您的应用程序将在 localhost3000 上打开，您现在应该看到如下内容：
您在环境变量中拥有的相同文本。现在，您可以在项目中的任何位置使用此变量，并且只需更改此变量的值即可轻松进行影响数千个文件的更改。
这里的问题是我们的环境变量现在在生产和开发模式下都是一样的，因为我们还没有指定任何东西。
然而，我们可以做的是创建另一个 .env 文件并为生产模式制定规范。但这也不是一个可行的解决方案。
请记住，我们的目标是让我们的项目源代码尽可能干燥。
为此，我们必须安装一个包 env-cmd，然后创建一个 .env-cmdrc.json 文件。此文件将包含您在不同模式下所需的所有不同值（API 密钥）的 json 格式。
因此，继续使用以下命令安装 env-cmd 包：
下一步是在项目文件的根目录中创建 env-cmdrc.json，然后将以下代码添加到其中：
从上面的代码中，我们简单地创建了开发和生产两个对象。在这些对象中，我们每个都传递了一个对象，其键名为 REACT_APP_MY_API_KEY，这是我们的环境变量。我们向这个密钥对象传递了不同的值（这将是您在开发和生产模式下拥有的不同 API 密钥）。
为了测试我们做了什么，让我们回到脚本下的 package.json 文件，我们将有两个启动脚本，一个将在我们运行命令 npm run start:staging 时执行，另一个将在我们运行时执行运行命令 npm run start:prod。
所以修改你的脚本对象，让这些启动脚本像这样：
如果您保存文件并重新启动服务器，通过终止它并运行 npm run start:staging，您应该会看到如下内容：
这是因为我们运行了暂存启动脚本，但是如果我们运行 npm run start:prod 会怎样。好吧，您猜对了，您将看到生产 API 密钥。
但是，您可以删除生产启动脚本并将生产 API 密钥传递给构建脚本，而不是拥有两个启动脚本，如下所示：
这样，当您在生产模式下部署应用程序时，您将获得生产 API 密钥，而当它处于开发模式时，您将获得开发 API 密钥。
有了这个，您可以将条带 API 密钥用于生产和开发模式。
您会看到，在环境中，我们无需太多代码就可以对同一个变量使用不同的值。
在现实生活中，您还可以 gitignore .env 文件。这将阻止您的应用程序将您的 .env 文件推送到 github 等 git 平台，这样其他人将无法看到您的 API 密钥和您拥有的其他敏感数据。
要 gitignore 你的 .env 文件，你必须在你的 gitignore 文件中添加 .env* 。这将告诉 git 忽略所有具有 .env 扩展名的文件
当您推送到 github 时，您的 .env 文件不会在将被推送的文件中，因此您的敏感数据是安全的。
所以如果你想用一个变量在不同的模式下显示不同的值，你可以轻松使用环境变量。
结论
在处理 React.js 项目时，您可能会面临使用 API 密钥等数据来帮助您连接到后端服务器的需求。现在，您的应用程序中的多个位置可能都需要这些密钥，并且您可能不喜欢每次需要它们时总是复制和粘贴它们。
除了它们是密钥并且需要始终受到保护之外，因此即使您将工作推送到 github 之类的地方，人们也不应该看到这些密钥，但您的应用程序仍然需要它们才能正常运行。
解决方案是使用环境变量。在本文中，我解释了环境变量是什么以及环境变量的用例以及如何自己创建和使用环境变量。
我希望这对您有所帮助，请留下任何问题或提出您认为我应该添加或可能遗漏的内容的建议，这将有助于教导其他人并帮助他们成长。谢谢你。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
