javascript - 理解 React JS 中的 .env 文件和环境变量

Question

我是 Web 开发领域的新手，现在我正在尝试了解 React JS 中 .env 文件的用法。因此，我阅读了多篇文章并观看了一些解释视频。然而，他们中的大多数人都关注如何使用它而不是它实际上是什么。我是否正确理解使用环境变量的主要好处是:

1) 它们使维护应用程序变得更加容易，因为它们都存储在一个文件 .env 中2)用户不可见，不显示也不上传到Git仓库

它是否正确，还有什么我需要考虑的吗？

Answer 1

它们对于存储不属于状态或作为声明(深层)在源中的站点范围的值和设置很有用。

要知道的重要一点是，要让 React 使用它们，它们必须以 REACT_APP_ 开头。这是因为环境是一个nodejs环境，nodejs会声明所有变量，除非它们以REACT_APP_

开头

以 REACT_APP_ 开头的环境变量在构建期间嵌入到应用代码中。

不要将任何 secret (例如私钥)存储为 REACT_APP_ 变量!这将在 JS 构建中公开它们。

在您的 React 应用中，您可以像这样访问变量:

let value = {process.env.REACT_APP_MYVALUE}

在 HTML 中，您可以这样使用变量:

<title>%REACT_APP_SITE_NAME%</title>

有关 create-react-app 用法的快速阅读:https://create-react-app.dev/docs/adding-custom-environment-variables