如何在Bazel中将构建标志转为环境变量字典？

要实现通过bazel build //test:bundle --//:foo_flag=bar这样的命令传递自定义标志，并将其注入到webpack构建的环境变量中，需要分两步操作：

1. 定义自定义构建标志 #

在根目录的BUILD.bazel文件中，添加build_setting规则来声明你的自定义标志：

# 根目录BUILD.bazel
build_setting(
    name = "foo_flag",
    # 可选：设置标志默认值，不指定则为空字符串
    build_setting_default = "default_foo_value",
    # 指定标志类型为字符串
    kind = "string",
    # 允许其他包访问该标志
    visibility = ["//visibility:public"],
)

如果你使用Bazel 6.0及以上版本，也可以用更简洁的flag规则（本质是build_setting的别名）：

flag(
    name = "foo_flag",
    build_setting_default = "default_foo_value",
    visibility = ["//visibility:public"],
)

2. 在rules_js目标中引用标志值 #

修改test包下的BUILD.bazel文件，在bin.webpack_cli的env字段中直接通过$(value //:foo_flag)引用标志值：

load("@npm//:defs.bzl", "npm_link_all_packages")
load("@npm//test:webpack-cli/package_json.bzl", "bin")

npm_link_all_packages(
  name = "node_modules",
)

bin.webpack_cli(
  name = "bundle",
  outs = [
    "out/index.html",
    "out/main.js",
  ],
  args = [
    "--config",
    "webpack.config.js",
    "-o",
    "out",
  ],
  srcs = [
    "webpack.config.js",
    ":node_modules",
  ] + glob([
    "src/**/*.js",
  ]),
  chdir = package_name(),
  env = {
    # 将标志值注入到环境变量FOO中
    "FOO": "$(value //:foo_flag)",
  },
  visibility = [
    "//visibility:public",
  ],
)

3. 在webpack配置中使用环境变量 #

你可以在webpack.config.js里通过process.env.FOO获取命令行传入的标志值，甚至可以通过DefinePlugin将其注入到前端代码中：

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

module.exports = {
  // ...其他webpack配置
  plugins: [
    new webpack.DefinePlugin({
      "process.env.FOO": JSON.stringify(process.env.FOO),
    }),
  ],
};

验证效果 #

执行构建命令：

bazel build //test:bundle --//:foo_flag=bar

此时process.env.FOO的值会是bar，webpack构建过程中就能正常使用该值。

内容的提问来源于stack exchange，提问作者sdgfsdh