我是一个相对较新的web开发世界,现在我试图了解使用.env文件在React JS.所以,我读了很多文章,看了一些解释视频.然而,他们大多数都集中在如何使用它,而不是它实际上是什么.我是否正确地理解,使用环境变量的主要好处是:1)由于它们都存储在一个文件.env中,因此可以更轻松地维护应用程序2)它们对用户不可见,不会显示和上传到Git存储库它是否正确,我是否还需要考虑其他问题?
.env
rxztt3cl1#
它们对于存储不属于状态的站点范围的值和设置或将其作为声明(深层)存储在源代码中非常有用。需要知道的是,react必须以REACT_APP_开头才能使用这些变量,这是因为环境是nodejs环境,nodejs将声明所有变量,除非它们以REACT_APP_开头以REACT_APP_开头的环境变量在构建时嵌入到应用程序代码中。
REACT_APP_
不要将任何秘密(如私钥)存储为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
fdx2calv2#
环境(. env)变量用于存储敏感信息,或者顾名思义,存储以环境为中心的信息(实时、开发、调试等).env文件也保存在.gitignore中,因此不会推送到任何存储库。
.gitignore
.env.example是一个不保存在.gitignore中的文件,但其他开发人员需要它来了解如何以及将什么放入他们的.env中。.env.example:
.env.example
.env.example:
REACT_APP_STRIPE_KEY= MY_SECRET_KEY= THIS= FOO= BAR=
.env基本上是一个空的例子,然后被复制并在.env文件中填充实值,该文件只对该计算机上的开发人员可用,并由脚本在本地读取,然后知道以什么模式启动应用程序,连接到什么数据库,使用什么密码等。
vfhzx4xs3#
在根文件夹中创建一个文件。它的.env文件
REACT_APP_(VARIABLE_NAME)=KEY_HERE
用法:在.env文件中添加变量时。重新启动应用。
console.log( process.env.REACT_APP_(VARIABLE_NAME) )
和.gitignore文件,添加下面的代码
3条答案
按热度按时间rxztt3cl1#
它们对于存储不属于状态的站点范围的值和设置或将其作为声明(深层)存储在源代码中非常有用。
需要知道的是,react必须以
REACT_APP_
开头才能使用这些变量,这是因为环境是nodejs环境,nodejs将声明所有变量,除非它们以REACT_APP_
开头以
REACT_APP_
开头的环境变量在构建时嵌入到应用程序代码中。不要将任何秘密(如私钥)存储为
REACT_APP_
变量!这将在JS构建中暴露它们。在react应用中,您可以按如下方式访问变量:
在HTML中,可以按如下方式使用变量:
快速阅读create-react-app的用法:https://create-react-app.dev/docs/adding-custom-environment-variables
fdx2calv2#
用法
环境(. env)变量用于存储敏感信息,或者顾名思义,存储以环境为中心的信息(实时、开发、调试等)
.env
文件也保存在.gitignore
中,因此不会推送到任何存储库。跟踪变量
.env.example
是一个不保存在.gitignore
中的文件,但其他开发人员需要它来了解如何以及将什么放入他们的.env
中。.env.example:
.env
基本上是一个空的例子,然后被复制并在.env
文件中填充实值,该文件只对该计算机上的开发人员可用,并由脚本在本地读取,然后知道以什么模式启动应用程序,连接到什么数据库,使用什么密码等。vfhzx4xs3#
在根文件夹中创建一个文件。它的.env文件
用法:在.env文件中添加变量时。重新启动应用。
和.gitignore文件,添加下面的代码