近日,Node.js 团队核心成员 Ulises Gascón 在社交平台表示,Node.js 20.6 版本将原生支持 .env
文件,该版本计划于 8 月 28 日发布。下面就来看看 .env
文件是什么,有什么作用,如果在浏览器环境中使用 .env
.
Node.js 原生支持 .env
从 Node.js v20.6.0 开始,Node.js 支持使用 .env
文件来配置环境变量。配置文件应遵循 INI 文件格式,每一行都包含一个环境变量的键值对。通过这个新的特性,就无需再使用第三方模块来加载 .env
中的环境变量了。
要使用预定义的配置初始化 Node.js 应用,请使用以下 CLI 命令:
node --env-file=config.env index.js。
例如,当应用初始化时,可以使用 process.env.PASSWORD
访问以下环境变量:
PASSWORD=nodejs
除了环境变量,这个更改还允许在 .env
文件中直接定义 NODE_OPTIONS
环境变量,无需将其包含在 package.json
中。
.env
.env
文件用于配置环境变量。环境变量是在运行应用程序时向操作系统或应用传递的值,用于控制应用的行为和设置。.env
文件通常包含敏感信息(如数据库连接字符串、API 密钥等),因此它们被排除在代码版本控制系统之外,以保护这些敏感数据。
.env
文件使用键值对的格式,每一行都是一个环境变量的定义。例如:
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=123456
API_KEY=abcdef123456
在 Node.js 中有一个 process
全局变量,其中的env
属性可以访问系统中的环境变量。
在应用中,Node.js 无法自行维护本地环境变量,需要借助第三方库(如dotenv
,它是一个零依赖的模块)来加载.env
文件,并将其中的环境变量注入到 process.env
对象中。通过这种方式,可以轻松地从程序中访问这些环境变量,而不需要显式地硬编码它们。
要通过 dotenv
来加载 .env
文件,需要先安装 dotenv
:
npm i -S dotenv
以下是使用 dotenv
库加载 .env
文件的示例代码:
require('dotenv').config(); // 加载 .env 文件
console.log(process.env.DB_HOST); // 访问环境变量
console.log(process.env.API_KEY);
这里,dotenv
库的 config()
方法会读取.env
文件,并将其中的环境变量加载到 process.env
对象中。然后,可以通过 process.env
对象访问这些环境变量的值。
使用 .env
文件的好处是,可以根据不同的环境(开发、测试、预发、生产环境等)设置不同的配置值,而不需要直接修改代码。这样做可以使应用更加灵活和可移植。
浏览器环境
在 Node.js 环境中,可以使用 process.env
来获取环境变量的值。但是,在浏览器环境下,process.env
是不可用的,无法直接在浏览器中获取环境变量的值。
幸运的是,通过使用打包工具,可以将环境变量暴露给浏览器运行时环境。下面我们来看一下如何在 Vite 和 webpack 中实现这一目标。
Vite
Vite 通过 import.meta.env
对象来暴露一组预定义的变量:
-
import.meta.env.MODE
:值为'development'
或'production'
-
import.meta.env.PROD
:在生产模式下为true
-
import.meta.env.DEV
:在开发模式下为true
-
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_
前缀开头的变量(但这可以进行配置)。
Vite 在如何访问环境变量方面有一个详细的指南:https://cn.vitejs.dev/guide/env-and-mode.html。
Webpack
Webpack 中内置的 EnvironmentPlugin
插件可以用来暴露环境变量。
例如,要暴露 NODE_ENV
环境变量,可以使用以下配置:
// webpack.config.js
const { EnvironmentPlugin } = require('webpack');
module.exports = {
// ...
plugins: [
// ...
new EnvironmentPlugin(['NODE_ENV'])
]
}
如果环境中没有 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'
。
如果想要在使用 Webpack 打包的项目中使用.env
文件,还是需要借助第三方插件 dotenv,安装之后,在 webpack.config.js
中进行如下配置:
const path = require("path");
const webpack = require('webpack');
// 使用 dotenv 从项目根目录读取 .env 文件。
const dotenv = require('dotenv').config( {
path: path.join(__dirname, '.env')
} );
module.exports = {
entry: "./src/app.js",
output: {
path: path.resolve(__dirname, "public"),
filename: "app.js",
},
module: {
rules: [
{
test: /\.js?$/,
exclude: /(node_modules)/,
include: path.resolve(__dirname, "src"),
use: {
loader: "babel-loader"
}
},
]
},
plugins: [
new webpack.DefinePlugin( {
"process.env": dotenv.parsed
} ),
],
};
通过使用webpack.DefinePlugin
,解析并注入整个.env
文件的内容,.env
文件中的内容被转换为 JavaScript 对象并分配给变量process.env
。
除此之外,有一个名为 dotenv-webpack 的 webpack 插件,用于加载 .env
文件并将其中定义的环境变量注入到应用中。这样,就可以在代码中使用 process.env.VARIABLE_NAME
来访问这些环境变量的值。要使用 dotenv-webpack
插件,需要按照以下步骤进行设置:
-
首先,在项目中安装
dotenv-webpack
。可以使用 npm 或者 yarn 进行安装:
npm install dotenv-webpack
-
在 webpack 的配置文件中添加以下代码:
const DotenvWebpack = require('dotenv-webpack');
module.exports = {
// ...其他的 webpack 配置
plugins: [
// 添加 DotenvWebpack 插件
new DotenvWebpack()
]
}
这样,当运行 webpack 构建时,dotenv-webpack
插件会自动加载 .env
文件并将其中定义的环境变量注入到应序中。可以在项目的不同文件中使用 process.env
访问这些变量的值。
Webpack 在如何访问环境变量方面有一个详细的指南:https://webpack.js.org/plugins/environment-plugin/