Node.js 终于原生支持 .env 文件了!( 二 )


例如,要暴露 NODE_ENV 环境变量,可以使用以下配置:
// webpack.config.jsconst { EnvironmentPlugin } = require('webpack');module.exports = {// ...plugins: [// ...new EnvironmentPlugin(['NODE_ENV'])]}如果环境中没有 NODE_ENV 变量,该插件将抛出错误 。但可以使用一个普通的 JAVAScript 对象作为配置对象(默认值为该对象的值)来为变量分配一个默认值:
// webpack.config.jsconst { 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/ 。

【Node.js 终于原生支持 .env 文件了!】


推荐阅读