Javascript 环境变量在 JS 应用程序中加载环境变量

如何存储和使用本地开发的环境变量

API 和第三方集成要求开发人员使用称为环境变量或配置变量的配置数据。这些变量通常存储在受密码保护的地方，例如 CI 工具或部署管道，但是当我们在本地开发应用程序时，如何使用它们呢？

TL;DR：

• 不要将环境变量存储在源代码控制中
• 使用dotenv从 .env 文件中读取数据
• create-react-app 强制在环境变量上使用命名空间

本简短教程将讲解在本地开发时将环境变量加载到代码中的一种方式。这种方法的主要优点是 API 密钥等机密信息无需提交到源代码管理中，从而更安全地保护您的应用程序。

要求：

• Javascript 应用程序
• 包管理器（yarn 和 npm 很棒）
• Node 7+

设置变量

在仓库根目录下创建一个名为“.env”的文件。这个文件被称为“点文件”，与普通文件不同，它通常隐藏在文件浏览器中。

大多数 IDE 允许用户创建没有名称的文件，但如果不是这种情况，请转到您的终端并进入应用程序的根文件夹。

touch .env

接下来，使用 key=value 格式设置变量，以换行符分隔：

API_KEY=abcde
API_URL=https://my-api.com/api

最后，确保 .env 文件没有提交到你的仓库。你可以打开（或创建）一个 .gitignore 文件，并在其中添加以下代码：

.env # This contains secrets, don't store in source control

使用变量

前往您的终端，使用您首选的包管理器安装dotenv ：

# Using npm:
npm i dotenv

# Using yarn:
yarn add dotenv

现在你可以从 .env 文件中读取内容了。请尽早在你的应用程序中添加这行代码。对于 React 应用来说，通常是 index.js 或 App.js，但这完全取决于你的设置：

require('dotenv').config();

就这样！你的应用程序应该可以通过 process.env 对象访问环境变量了。你可以调用以下命令进行确认：

console.log(process.env);

如果一切顺利的话，你应该会看到类似这样的内容：

{
 NODE_ENV: "development",
 API_KEY: "abcde",
 API_URL: "https://my-api.com/api"
}

🎉 您现在可以在应用程序中使用环境变量了！

现在，对于我们这些使用 create-react-app 的人来说，有一个问题，我希望它能有更好的记录。

使用 create-react-app

Facebook 的create-react-app工作方式略有不同。如果您按照上述步骤操作，但尚未退出应用程序，则应该只看到 NODE_ENV 变量。这是因为create-react-app 仅允许应用程序读取带有 REACT_APP_ 前缀的变量。

因此，为了让我们的变量起作用，我们需要像这样更新我们的 .env 文件：

REACT_APP_API_KEY=abcde
REACT_APP_API_URL=https://my-api.com/api

再次通过将 process.env 记录到控制台来验证您的设置：

{
 NODE_ENV: "development",
 REACT_APP_API_KEY: "abcde",
 REACT_APP_API_URL: "https://my-api.com/api"
}

你就完成了😎

尖端

.env 文件中的变量不需要引号，除非值中有空格。

NO_QUOTES=thisisokay
QUOTES="this contains spaces"

创建一个 .env.sample 文件来跟踪应用所需的变量是一个好习惯。这是我当前项目中的示例文件。请注意，它解释了在哪里可以找到这些键和 URL。

CONTENTFUL_SPACE_TOKEN="see Contentful dashboard"
CONTENTFUL_API_KEY="see Contentful dashboard"
S3_BUCKET_URL="check AWS"
SHOW_DEBUG_SIDEBAR="if true, show debug sidebar"

进一步阅读：

• 在 12-Factor App 方法论中读取环境中的配置

感谢您的阅读！您更喜欢其他在本地加载环境变量的方法吗？欢迎在下面的评论区留言！