React环境变量
什么是 ENV 🤔
使用环境变量文件来存储您的敏感凭据，例如 API 密钥。
环境变量还可以帮助您将 API 链接集中存储在一个位置，这样您就无需手动在每个文件中更改链接。
使用环境变量文件需要安装插件吗？🙄
不，React 前端搭配 Node 后端是一个非常稳定的组合，可以构建任何你想要的应用。所以你可以创建和使用.env文件，而无需安装任何插件。
通常情况下，您只需创建一个.env文件即可触发本地、集成和生产环境。
如果您想为集成和生产环境创建不同的密钥，该怎么办？
如果集成环境和生产环境需要使用不同的密钥，那么就需要对环境进行定制。
现在，让我们来看看本文将涵盖哪些内容：
1. 自定义构建环境的环境变量
2. 在 HTML 中使用环境变量
1. 自定义构建环境的环境变量
React 目前已经支持一些环境，例如，.env.development等等。.env.test.env.production
.env文件可以使用：
.env： 默认.env.local：本地覆盖。除测试环境外，所有环境都会加载此文件。.env.development，，.env.test：.env.production特定于环境的设置
env您可以创建React 中未包含的自定义文件。您需要安装一个名为 `<package_name>` 的包env-cmd来设置自定义环境。
.env.integration创建一个名为where.envexists 的文件- 设置您希望用于集成的环境变量
.env.integration
REACT_APP_NAME=XXXX
-
安装
env-cmd$ yarn add env-cmd -
在你的脚本中添加一个新脚本
package.json，并使用你的新环境进行构建：{ "scripts": { "build:integration": "env-cmd -f .env.integration yarn run build" } } -
现在您可以运行集成命令
yarn run build:integration，使用集成环境配置进行构建。
📝 变量
.env.production将用作备用方案，因为NODE_ENV对于构建来说，它始终设置为生产环境。
如果 NODE_ENV=production 时想要安装开发依赖项该怎么办 🤔
如您所知NODE_ENV=production，如果未指定，则 devDependencies 包将不会被安装。
NODE_ENV=production但是，您可以通过在设置yarn install --production=false中安装 devDependencies package.json。
点击此链接了解更多信息。
2. 在 HTML 中使用环境变量
环境变量通常只在 JavaScript 文件中使用。但是，如果需要在 HTML 中使用环境变量呢？例如，它可以是 Google 地图密钥，也可以是脚本中的任何密钥。
您可以在 index.html 中访问环境变量，只需记住环境变量应该以 . 开头即可REACT_APP_。
<title>%REACT_APP_NAME%</title>
.env在项目根目录下的文件中定义永久环境变量。
.env：
REACT_APP_NAME=ProjectName
📝 当你对文件进行任何更改时，请记住重启服务器.env。
参考🧐
摘要⅀
如果你想添加 React 应用中未提及的其他环境变量，你需要设置 env-cmd 并使用它。此外，你还可以使用 REACT_APP_ 在 HTML 文件中使用 .env 变量。
感谢阅读这篇文章❤️
