建站
咨詢
售后
建站咨詢
新聞中心
近日，Node.js 團(tuán)隊(duì)核心成員 Ulises Gascón 在社交平臺(tái)表示，Node.js 20.6 版本將原生支持 .env 文件，該版本計(jì)劃于 8 月 28 日發(fā)布。下面就來(lái)看看 .env 文件是什么，有什么作用，如果在瀏覽器環(huán)境中使用 .env.
從策劃到設(shè)計(jì)制作，每一步都追求做到細(xì)膩，制作可持續(xù)發(fā)展的企業(yè)網(wǎng)站。為客戶提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、網(wǎng)站策劃、網(wǎng)頁(yè)設(shè)計(jì)、申請(qǐng)域名、虛擬空間、網(wǎng)絡(luò)營(yíng)銷、VI設(shè)計(jì)、 網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案,以客戶的口碑塑造優(yōu)易品牌,攜手廣大客戶,共同發(fā)展進(jìn)步。
Node.js 原生支持 .env
從 Node.js v20.6.0 開(kāi)始，Node.js 支持使用 .env 文件來(lái)配置環(huán)境變量。配置文件應(yīng)遵循 INI 文件格式，每一行都包含一個(gè)環(huán)境變量的鍵值對(duì)。通過(guò)這個(gè)新的特性，就無(wú)需再使用第三方模塊來(lái)加載 .env 中的環(huán)境變量了。
要使用預(yù)定義的配置初始化 Node.js 應(yīng)用，請(qǐng)使用以下 CLI 命令：
node --env-file=config.env index.js。例如，當(dāng)應(yīng)用初始化時(shí)，可以使用 process.env.PASSWORD 訪問(wèn)以下環(huán)境變量：
PASSWORD=nodejs除了環(huán)境變量，這個(gè)更改還允許在 .env 文件中直接定義 NODE_OPTIONS環(huán)境變量，無(wú)需將其包含在 package.json 中。
.env
.env 文件用于配置環(huán)境變量。環(huán)境變量是在運(yùn)行應(yīng)用程序時(shí)向操作系統(tǒng)或應(yīng)用傳遞的值，用于控制應(yīng)用的行為和設(shè)置。.env 文件通常包含敏感信息（如數(shù)據(jù)庫(kù)連接字符串、API 密鑰等），因此它們被排除在代碼版本控制系統(tǒng)之外，以保護(hù)這些敏感數(shù)據(jù)。
.env 文件使用鍵值對(duì)的格式，每一行都是一個(gè)環(huán)境變量的定義。例如：
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=123456
API_KEY=abcdef123456在 Node.js 中有一個(gè) process全局變量，其中的env屬性可以訪問(wèn)系統(tǒng)中的環(huán)境變量。
在應(yīng)用中，Node.js 無(wú)法自行維護(hù)本地環(huán)境變量，需要借助第三方庫(kù)（如dotenv，它是一個(gè)零依賴的模塊）來(lái)加載.env文件，并將其中的環(huán)境變量注入到 process.env 對(duì)象中。通過(guò)這種方式，可以輕松地從程序中訪問(wèn)這些環(huán)境變量，而不需要顯式地硬編碼它們。
要通過(guò) dotenv來(lái)加載 .env 文件，需要先安裝 dotenv：
npm i -S dotenv以下是使用 dotenv 庫(kù)加載 .env 文件的示例代碼：
require('dotenv').config(); // 加載 .env 文件
console.log(process.env.DB_HOST); // 訪問(wèn)環(huán)境變量
console.log(process.env.API_KEY);這里，dotenv 庫(kù)的 config() 方法會(huì)讀取.env文件，并將其中的環(huán)境變量加載到 process.env 對(duì)象中。然后，可以通過(guò) process.env 對(duì)象訪問(wèn)這些環(huán)境變量的值。
使用 .env 文件的好處是，可以根據(jù)不同的環(huán)境（開(kāi)發(fā)、測(cè)試、預(yù)發(fā)、生產(chǎn)環(huán)境等）設(shè)置不同的配置值，而不需要直接修改代碼。這樣做可以使應(yīng)用更加靈活和可移植。
瀏覽器環(huán)境
在 Node.js 環(huán)境中，可以使用 process.env 來(lái)獲取環(huán)境變量的值。但是，在瀏覽器環(huán)境下，process.env 是不可用的，無(wú)法直接在瀏覽器中獲取環(huán)境變量的值。
幸運(yùn)的是，通過(guò)使用打包工具，可以將環(huán)境變量暴露給瀏覽器運(yùn)行時(shí)環(huán)境。下面我們來(lái)看一下如何在 Vite 和 webpack 中實(shí)現(xiàn)這一目標(biāo)。
Vite
Vite 通過(guò) import.meta.env 對(duì)象來(lái)暴露一組預(yù)定義的變量：
- import.meta.env.MODE：值為 'development' 或 'production'。
- import.meta.env.PROD：在生產(chǎn)模式下為 true。
- import.meta.env.DEV：在開(kāi)發(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 來(lái)實(shí)現(xiàn)這一功能。但不需要手動(dòng)調(diào)用與 dotenv 相關(guān)的東西：Vite 會(huì)自動(dòng)完成所有操作。
例如，如果有一個(gè)如下所示的 .env 文件：
VITE_MY_VAR=value那么可以在瀏覽器中通過(guò) import.meta.env.VITE_MY_VAR 來(lái)訪問(wèn)這個(gè)值，它的結(jié)果將是 'value'。
注意，Vite 只會(huì)公開(kāi)以 VITE_ 前綴開(kāi)頭的變量（但這可以進(jìn)行配置）。
Vite 在如何訪問(wèn)環(huán)境變量方面有一個(gè)詳細(xì)的指南：https://cn.vitejs.dev/guide/env-and-mode.html。
Webpack
Webpack 中內(nèi)置的 EnvironmentPlugin 插件可以用來(lái)暴露環(huán)境變量。
例如，要暴露 NODE_ENV 環(huán)境變量，可以使用以下配置：
// webpack.config.js
const { EnvironmentPlugin } = require('webpack');
module.exports = {
// ...
plugins: [
// ...
new EnvironmentPlugin(['NODE_ENV'])
]
}如果環(huán)境中沒(méi)有 NODE_ENV 變量，該插件將拋出錯(cuò)誤。但可以使用一個(gè)普通的 JavaScript 對(duì)象作為配置對(duì)象（默認(rèn)值為該對(duì)象的值）來(lái)為變量分配一個(gè)默認(rèn)值：
// webpack.config.js
const { EnvironmentPlugin } = require('webpack');
module.exports = {
// ...
plugins: [
// ...
new EnvironmentPlugin({
NODE_ENV: 'development'
})
]
}使用上述配置，如果未設(shè)置 NODE_ENV 變量，Webpack 會(huì)將 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
} ),
],
};通過(guò)使用webpack.DefinePlugin，解析并注入整個(gè).env文件的內(nèi)容，.env 文件中的內(nèi)容被轉(zhuǎn)換為 JavaScript 對(duì)象并分配給變量process.env。
除此之外，有一個(gè)名為 dotenv-webpack 的 webpack 插件，用于加載 .env 文件并將其中定義的環(huán)境變量注入到應(yīng)用中。這樣，就可以在代碼中使用 process.env.VARIABLE_NAME 來(lái)訪問(wèn)這些環(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 插件會(huì)自動(dòng)加載 .env 文件并將其中定義的環(huán)境變量注入到應(yīng)序中?？梢栽陧?xiàng)目的不同文件中使用 process.env 訪問(wèn)這些變量的值。
Webpack 在如何訪問(wèn)環(huán)境變量方面有一個(gè)詳細(xì)的指南：https://webpack.js.org/plugins/environment-plugin/。
分享題目：Node.js終于原生支持.env文件了！
文章轉(zhuǎn)載：http://www.dlmjj.cn/article/dphshis.html
