前言
通过在 vercel 部署项目时，需要配置相关环境参数。今日前端早读课文章由 @飘飘翻译分享。
正文从这开始～～
环境变量是在 JavaScript 执行环境之外定义的。
有一组环境变量是由操作系统定义的，比如说。
USER：当前用户
HOME：当前用户的主路径
PWD：当前的工作目录
PATH：要搜索的目录以执行命令
就 JavaScript 和 Node.js 生态系统而言，以下变量是常见的。
NODE_ENV：决定了脚本是在开发还是生产模式下运行。通常取其中一个值：
production、prod、development、dev或testPORT：运行中的应用程序将使用的端口（如 3000、8080 等）。
让我们看看如何在 JavaScript 文件中访问这些环境变量（无论是操作系统还是 Node.js 专用）。
1.process.env 对象
当以 Node CLI（命令行界面）命令的形式执行一个 JavaScript 文件时，Node 会创建一个特殊的 process.env 对象，其中包含作为属性的环境变量。
例如，让我们在命令行中执行 JavaScript 文件 main.js。
cd /home/dmitri/
NODE_ENV=production node main.js其中 main.js 文件包含以下代码。
// /home/dmitri/main.js
console.log(process.env.USER); // dmitri
console.log(process.env.PWD); // /home/dmitri/
console.log(process.env.NODE_ENV); // productionprocess.env.USER 是执行该命令的操作系统用户名。该变量的值为 "dmitri"，因为这是我的操作系统用户名。
process.env.PWD 包含当前工作目录的绝对路径。由于执行的文件路径是 /home/dmitri/main.js，那么当前工作目录就是 /home/dmitri/。
上述变量取自操作系统的环境。
process.env.NODE_ENV 变量等于 "production"。这个变量是由 NODE_ENV=production node main.js 命令的前缀 NODE_ENV=production 定义的。
如果你想为某些环境变量提供本地默认值，那么请查看 dotenv 项目：https://github.com/motdotla/dotenv
2. 浏览器环境中的 process.env
包括 process.env 在内的环境变量，可以被运行在 CLI 中的脚本所访问。
然而，在浏览器环境中，process.env 是不可用的。
幸运的是，将环境变量暴露给浏览器运行时可以通过 bundlers 来实现。让我们看看如何使用 Vite 和 webpack 来实现。
2.1 Vite
Vite 通过 import.meta.env 对象暴露了一组预定义的变量。
import.meta.env.MODE：是 "development" 或 "production"。import.meta.env.PROD：在 production 模式下为真。import.meta.env.DEV: 在 development 模式下为真。import.meta.env.SSR: 是一个布尔值，表示应用程序是否在服务器端运行。import.meta.env.BASE_URL：基本 URL。
除此以外，Vite 还可以从.env 文件中加载变量。在引擎下，Vite 使用 dotenv。但你不必手动调用任何与 dotenv 有关的东西。Vite 为你做一切。
比如说，有一个这样的.env 文件。
VITE_MY_VAR=value那么你可以在运行时在浏览器中访问这个值 import.meta.env.VITE_MY_VAR，这将是 'value'。
请注意，Vite 只公开暴露以 VITE_为前缀的变量（但这可以配置：https://vitejs.dev/config/shared-options.html#envprefix）。
在 demo 中，Vite 提供的环境变量被呈现在网页上。
Vite 有一份关于如何访问环境变量的详细指南：https://vitejs.dev/guide/env-and-mode.html
2.2 webpack
内置插件 EnvironmentPlugin 可以在 webpack 中暴露环境变量。
例如，为了暴露 NODE_ENV 环境变量，你可以使用以下配置。
// webpack.config.js
const { EnvironmentPlugin } = require('webpack');
module.exports = {
// ...
plugins: [
// ...
new EnvironmentPlugin(['NODE_ENV'])
]
}打开 demo,NODE_ENV 变量被 webpack 暴露出来，并被呈现在网页上。
如果 NODE_ENV 变量在环境中不可用，该插件将抛出一个错误。但是你可以用一个普通的 JavaScript 对象作为配置，给变量分配一个默认值（值为默认值）。
// webpack.config.js
const { EnvironmentPlugin } = require('webpack');
module.exports = {
// ...
plugins: [
// ...
new EnvironmentPlugin({
NODE_ENV: 'development'
})
]
}在上述配置下，如果没有设置 NODE_ENV 变量，webpack 默认 process.env.NODE_ENV 为 development。
3. 结论
在 Node CLI 中执行的 JavaScript 文件可以使用特殊对象 process.env 访问环境变量。
例如，process.env.USER 包含执行脚本的用户名。
在浏览器中，环境变量在运行时是不可用的。但是像 Vite 和 webpack 这样的现代 bundlers 程序可以公开某些变量。
例如，Vite 使用 import.meta.env.MODE 暴露了当前的运行模式。在 webpack 中，EnvironmentPlugin 可以让你暴露出必要的变量。
你觉得哪些环境变量在运行时是有用的？
关于本文
译者：@飘飘
作者：@Dmitri Pavlutin
原文：https://dmitripavlutin.com/environment-variables-javascript/
这期前端早读课
对你有帮助，帮” 赞 “一下，
期待下一期，帮” 在看” 一下 。