EnvironmentPlugin 插件

webpackjsorg-main插件参考

EnvironmentPlugin 插件

EnvironmentPlugin 是在 process.env 键上使用 DefinePlugin 的简写形式。

用法

EnvironmentPlugin 接受一个键的数组，或一个将键映射到其默认值的对象。

js 复制代码

new webpack.EnvironmentPlugin(["NODE_ENV", "DEBUG"]);

这等效于以下 DefinePlugin 用法：

js 复制代码

new webpack.DefinePlugin({
  "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
  "process.env.DEBUG": JSON.stringify(process.env.DEBUG),
});

警告： EnvironmentPlugin 会在 process.env 中检查指定的变量。如果缺少该变量，它会查找配置中提供的默认值。如果环境变量和默认值都未定义，将抛出错误："EnvironmentPlugin - ${key} environment variable is undefined"。

带默认值的用法

另外，EnvironmentPlugin 支持一个对象，将键映射到其默认值。如果某个键在 process.env 中未定义，则使用该键的默认值。

js 复制代码

new webpack.EnvironmentPlugin({
  NODE_ENV: "development", // use 'development' unless process.env.NODE_ENV is defined
  DEBUG: false,
});

警告： 来自 process.env 的变量始终是字符串。

提示： 与 DefinePlugin 不同，默认值会由 EnvironmentPlugin 经过 JSON.stringify 处理。

提示： null 和 undefined 的默认值行为不同。对于在打包时_必须_提供的变量，请使用 undefined；如果它们是可选的，则使用 null。

示例：

让我们看看在测试文件 entry.js 上运行上述 EnvironmentPlugin 配置的结果：

js 复制代码

if (process.env.NODE_ENV === "production") {
  console.log("Welcome to production");
}
if (process.env.DEBUG) {
  console.log("Debugging output");
}

在终端中执行 NODE_ENV=production webpack 进行构建时，entry.js 变为：

js 复制代码

if ("production" === "production") {
  // <-- 'production' from NODE_ENV is taken
  console.log("Welcome to production");
}
if (false) {
  // <-- default value is taken
  console.log("Debugging output");
}

运行 DEBUG=false webpack 会产生：

js 复制代码

if ("development" === "production") {
  // <-- default value is taken
  console.log("Welcome to production");
}
if ("false") {
  // <-- 'false' from DEBUG is taken
  console.log("Debugging output");
}

用例：Git 版本

以下 EnvironmentPlugin 配置提供 process.env.GIT_VERSION（例如 "v5.4.0-2-g25139f57f"）和 process.env.GIT_AUTHOR_DATE（例如 "2020-11-04T12:25:16+01:00"），与仓库的最后一次 Git 提交对应：

js 复制代码

import childProcess from "node:child_process";

function git(command) {
  return childProcess.execSync(`git ${command}`, { encoding: "utf8" }).trim();
}

new webpack.EnvironmentPlugin({
  GIT_VERSION: git("describe --always"),
  GIT_AUTHOR_DATE: git("log -1 --format=%aI"),
});

DotenvPlugin

第三方 DotenvPlugin（dotenv-webpack）允许你暴露（一部分）dotenv 变量：

bash 复制代码

// .env
DB_HOST=127.0.0.1
DB_PASS=foobar
S3_API=mysecretkey

js 复制代码

new Dotenv({
  path: "./.env", // Path to .env file (this is the default)
  safe: true, // load .env.example (defaults to "false" which does not use dotenv-safe)
});

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。