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