Node.js 终于原生支持 .env 文件了！

近日，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/。