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