在构建 Web 前端项目过程中，我们经常需要定义和使用环境变量。下面我将介绍一些常见的解决方案。
生产环境/CI 构建阶段
在这个阶段，我们通常不需要过多关注环境变量的配置，只需遵循平台提供的规则即可，因为环境变量通常在平台上手动设置。 例如，在 Vercel ↗ 平台上：
因此，这些环境变量不会出现在我们项目的代码中。
开发阶段
如果你当前使用的框架已经提供了环境变量的配置方式，通常我们也不需要过多关注，只需遵循框架提供的规则即可。
如果框架没有提供这样的配置方式，我们可以考虑市场上已有的一些解决方案。
dotenv ↗
只需将 .env 文件放在项目的根目录下：
S3_BUCKET="我的存储桶"
SECRET_KEY="我的秘钥"
然后在应用程序的尽早位置导入并配置 dotenv：
require('dotenv').config()
console.log(process.env) // 在确认它起作用后可以移除这行代码
如果你不想在源代码中添加 require 代码，可以使用以下命令运行脚本：
node -r dotenv/config your_script.js
现在它应该可以工作了。
另外，出于安全性或团队成员配置的差异等原因，建议将 .env 文件添加到 .gitignore 中。
为了给新开发者提供更好的指导，你可以在 .gitignore 之外添加一个名为 .env.example 的文件，内容如下：
# 为了运行该项目，你需要在根目录下创建一个 .env 文件，并提供以下环境变量。
S3_BUCKET="你的存储桶"
SECRET_KEY="你的秘钥"
cross-env ↗
在过去，还有一个受欢迎的包叫做 cross-env。但现在，它已经被归档了。
我认为对于新用户来说，这是一个非常直观的解决方案。
{
"scripts": {
"build": "cross-env S3_BUCKET=\"我的存储桶\" npm run start"
}
}
只是有一些问题：
- 如果有很多环境变量，这种方式会变得不太友好。
- 如果不想与他人共享这些变量，需要在提交之前将它们移除。
结论
对我来说，目前我更倾向于使用 dotenv。
