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

Question

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

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

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

Answer 1

用法

环境 (.env) 变量用于存储敏感信息，或者顾名思义，以环境为中心的信息（实时、开发、调试等...）

.env文件也保存在.gitignore ，因此它不会被推送到任何存储库。

跟踪变量

.env.example是一个不保存在.gitignore的文件，但其他开发人员需要知道如何以及在他们的.env放入什么。 它看起来像这样：

.env.example:

REACT_APP_STRIPE_KEY=
MY_SECRET_KEY=
THIS=
FOO=
BAR=

基本上是.env的空示例。 然后将其复制并填充.env文件中的实际值，该文件仅可供该计算机上的开发人员使用，并由脚本在本地读取，然后脚本知道以何种模式启动应用程序，连接到哪个数据库，使用什么密码之类的

Answer 2

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

重要的是要知道，要反应使用它们，它们必须以REACT_APP_ 。 这是因为环境是 nodejs 的，nodejs 将声明所有变量，除非它们以REACT_APP_

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

不要将任何秘密（例如私钥）作为REACT_APP_变量存储在那里！ 这将在 JS 构建中公开它们。

在您的反应应用程序中，您可以像这样访问变量：

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

Answer 3

在根文件夹下创建一个.its.env文件

REACT_APP_(VARIABLE_NAME)=KEY_HERE

用法：当你在 .env 文件中添加一个变量时。 重新启动您的应用程序。

console.log( process.env.REACT_APP_(VARIABLE_NAME) )

和你的 .gitignore 文件，添加波纹管代码

.env