近日，Node.js 團(tuán)隊(duì)核心成員 Ulises Gascón 在社交平臺表示，Node.js 20.6 版本將原生支持 .env 文件，該版本計(jì)劃于 8 月 28 日發(fā)布。下面就來看看 .env 文件是什么，有什么作用，如果在瀏覽器環(huán)境中使用 .env.

Node.js 原生支持 .env

從 Node.js v20.6.0 開始，Node.js 支持使用 .env 文件來配置環(huán)境變量。配置文件應(yīng)遵循 INI 文件格式，每一行都包含一個(gè)環(huán)境變量的鍵值對。通過這個(gè)新的特性，就無需再使用第三方模塊來加載 .env 中的環(huán)境變量了。

要使用預(yù)定義的配置初始化 Node.js 應(yīng)用，請使用以下 CLI 命令：

node --env-file=config.env index.js。

例如，當(dāng)應(yīng)用初始化時(shí)，可以使用 process.env.PASSWORD 訪問以下環(huán)境變量：

PASSWORD=nodejs

除了環(huán)境變量，這個(gè)更改還允許在 .env 文件中直接定義 NODE_OPTIONS環(huán)境變量，無需將其包含在 package.json 中。

.env

.env 文件用于配置環(huán)境變量。環(huán)境變量是在運(yùn)行應(yīng)用程序時(shí)向操作系統(tǒng)或應(yīng)用傳遞的值，用于控制應(yīng)用的行為和設(shè)置。.env 文件通常包含敏感信息（如數(shù)據(jù)庫連接字符串、API 密鑰等），因此它們被排除在代碼版本控制系統(tǒng)之外，以保護(hù)這些敏感數(shù)據(jù)。

.env 文件使用鍵值對的格式，每一行都是一個(gè)環(huán)境變量的定義。例如：

DB_HOST=localhost
DB_USER=root
DB_PASSWORD=123456
API_KEY=abcdef123456

在 Node.js 中有一個(gè) process全局變量，其中的env屬性可以訪問系統(tǒng)中的環(huán)境變量。

在應(yīng)用中，Node.js 無法自行維護(hù)本地環(huán)境變量，需要借助第三方庫（如dotenv，它是一個(gè)零依賴的模塊）來加載.env文件，并將其中的環(huán)境變量注入到 process.env 對象中。通過這種方式，可以輕松地從程序中訪問這些環(huán)境變量，而不需要顯式地硬編碼它們。

要通過 dotenv來加載 .env 文件，需要先安裝 dotenv：

npm i -S dotenv

以下是使用 dotenv 庫加載 .env 文件的示例代碼：

require('dotenv').config(); // 加載 .env 文件

console.log(process.env.DB_HOST); // 訪問環(huán)境變量
console.log(process.env.API_KEY);

這里，dotenv 庫的 config() 方法會讀取.env文件，并將其中的環(huán)境變量加載到 process.env 對象中。然后，可以通過 process.env 對象訪問這些環(huán)境變量的值。

使用 .env 文件的好處是，可以根據(jù)不同的環(huán)境（開發(fā)、測試、預(yù)發(fā)、生產(chǎn)環(huán)境等）設(shè)置不同的配置值，而不需要直接修改代碼。這樣做可以使應(yīng)用更加靈活和可移植。

瀏覽器環(huán)境

在 Node.js 環(huán)境中，可以使用 process.env 來獲取環(huán)境變量的值。但是，在瀏覽器環(huán)境下，process.env 是不可用的，無法直接在瀏覽器中獲取環(huán)境變量的值。

幸運(yùn)的是，通過使用打包工具，可以將環(huán)境變量暴露給瀏覽器運(yùn)行時(shí)環(huán)境。下面我們來看一下如何在 Vite 和 webpack 中實(shí)現(xiàn)這一目標(biāo)。

Vite

Vite 通過 import.meta.env 對象來暴露一組預(yù)定義的變量：

• import.meta.env.MODE：值為 'development' 或 'production'。
• import.meta.env.PROD：在生產(chǎn)模式下為 true。
• import.meta.env.DEV：在開發(fā)模式下為 true。
• import.meta.env.SSR：一個(gè)布爾值，表示應(yīng)用是否在服務(wù)端運(yùn)行。
• import.meta.env.BASE_URL：基礎(chǔ) URL。

此外，Vite 還可以從 .env 文件中加載變量。在內(nèi)部，Vite 也是使用 dotenv 來實(shí)現(xiàn)這一功能。但不需要手動調(diào)用與 dotenv 相關(guān)的東西：Vite 會自動完成所有操作。

例如，如果有一個(gè)如下所示的 .env 文件：

VITE_MY_VAR=value

那么可以在瀏覽器中通過 import.meta.env.VITE_MY_VAR 來訪問這個(gè)值，它的結(jié)果將是 'value'。

注意，Vite 只會公開以 VITE_ 前綴開頭的變量（但這可以進(jìn)行配置）。

Vite 在如何訪問環(huán)境變量方面有一個(gè)詳細(xì)的指南：https://cn.vitejs.dev/guide/env-and-mode.html。

Webpack

Webpack 中內(nèi)置的 EnvironmentPlugin 插件可以用來暴露環(huán)境變量。

例如，要暴露 NODE_ENV 環(huán)境變量，可以使用以下配置：

// webpack.config.js
const { EnvironmentPlugin } = require('webpack');

module.exports = {
  // ...
  plugins: [
    // ...
    new EnvironmentPlugin(['NODE_ENV'])
  ]
}

如果環(huán)境中沒有 NODE_ENV 變量，該插件將拋出錯(cuò)誤。但可以使用一個(gè)普通的 JavaScript 對象作為配置對象（默認(rèn)值為該對象的值）來為變量分配一個(gè)默認(rèn)值：

// webpack.config.js
const { EnvironmentPlugin } = require('webpack');

module.exports = {
  // ...
  plugins: [
    // ...
    new EnvironmentPlugin({
      NODE_ENV: 'development'
    })
  ]
}

使用上述配置，如果未設(shè)置 NODE_ENV 變量，Webpack 會將 process.env.NODE_ENV 默認(rèn)設(shè)置為 'development'。

如果想要在使用 Webpack 打包的項(xiàng)目中使用.env文件，還是需要借助第三方插件 dotenv，安裝之后，在 webpack.config.js 中進(jìn)行如下配置：

const path = require("path");
const webpack = require('webpack');

// 使用 dotenv 從項(xiàng)目根目錄讀取 .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，解析并注入整個(gè).env文件的內(nèi)容，.env 文件中的內(nèi)容被轉(zhuǎn)換為 JavaScript 對象并分配給變量process.env。

除此之外，有一個(gè)名為 dotenv-webpack 的 webpack 插件，用于加載 .env 文件并將其中定義的環(huán)境變量注入到應(yīng)用中。這樣，就可以在代碼中使用 process.env.VARIABLE_NAME 來訪問這些環(huán)境變量的值。要使用 dotenv-webpack 插件，需要按照以下步驟進(jìn)行設(shè)置：

首先，在項(xiàng)目中安裝 dotenv-webpack?？梢允褂?npm 或者 yarn 進(jìn)行安裝：

npm install dotenv-webpack

在 webpack 的配置文件中添加以下代碼：

const DotenvWebpack = require('dotenv-webpack');

module.exports = {
  // ...其他的 webpack 配置

  plugins: [
    // 添加 DotenvWebpack 插件
    new DotenvWebpack()
  ]
}

這樣，當(dāng)運(yùn)行 webpack 構(gòu)建時(shí)，dotenv-webpack 插件會自動加載 .env 文件并將其中定義的環(huán)境變量注入到應(yīng)序中?？梢栽陧?xiàng)目的不同文件中使用 process.env 訪問這些變量的值。

Webpack 在如何訪問環(huán)境變量方面有一個(gè)詳細(xì)的指南：https://webpack.js.org/plugins/environment-plugin/。