Skip to main content
为一个或多个浏览器目标生成生产环境扩展产物。 build 会以生产模式编译你的扩展,并将输出写入 dist/<browser> 对于 monorepo / 子模块项目,关于配置期的环境变量解析(优先项目根,再退回工作区根),请参见 环境变量

什么时候使用 build

  • 为 Chrome Web Store、Edge Add-ons 或 Firefox Add-ons 准备扩展包。
  • 在持续集成(CI)中跑出可复现的生产产物。
  • 在提交前验证生产打包的输出以及各浏览器目标之间的差异。

build 命令的能力

用法

build 输出

运行 build 后,Extension.js 会为所选浏览器目标生成优化过的文件。输出位于 dist/,每个目标一个子目录。每个目录都包含打包后的 JavaScript、CSS、HTML 和必要的运行时资源。
对于 TypeScript 项目,build 也会重新生成 extension-env.d.ts 环境类型声明(与 dev 写出的是同一个文件), 所以无论你之前是否运行过 dev,CI 上的 tsc --noEmit 都能保持干净。 纯 JavaScript 项目会跳过这一步。
输出结构示例:

浏览器目标矩阵

引擎目标对 build 意味着什么

build 不会启动浏览器,因此引擎目标在这里并不指向某个二进制——但它们仍会产出一个独立的产物,而不是具名目标构建的改名副本:
  • 独立的输出目录。 --browser=chromium-based 输出到 dist/chromium-based,与 devpreviewstart 在该目标下使用的目录一致——用自定义 Chromium 二进制开发的项目,构建产物路径完全对应。
  • 独立的 env 解析。 .env.chromium-based.env.chromium-based.production 优先于家族级的 .env.chromium/.env.chrome/.env.edge,且打包后的代码中 EXTENSION_BROWSER === "chromium-based"——代码与配置可以据此区分“通用 Chromium”与某个具体商店构建。
  • 独立的 manifest 前缀。 manifest.json 中的 chromium-based: 键会作为该目标最具体的匹配生效,叠加在家族级 chrome:/chromium:/edge: 键之上。
gecko-based 相对 firefox 的行为完全相同。构建不需要浏览器二进制——--chromium-binary/--gecko-binary 只对会启动浏览器的命令有意义。

参数与 flag

共享的全局选项

也支持 全局 flag

模式覆盖

--mode 会覆盖构建的打包器模式以及 NODE_ENV。可选值为 developmentproductionnone。当你需要为 staging 或调试产出非生产 bundle 时(类似 Vite / webpack 的工作流),可以用它来对齐行为。
无效的值会以错误退出;默认值仍然是 production

zip 行为

示例

带 zip 输出与自定义文件名的构建

在这个示例中,构建以 Edge 与 Chrome 为目标,对输出进行打包,并保存为 my-extension.zip

带 polyfill 支持的构建

在这个示例中,构建以 Chrome 与 Firefox 为目标,并在相关地方加入 polyfill 支持。

构建源代码与产物 zip

最佳实践

  • 查看构建日志: 每次构建后检查日志,看是否有警告与缺失资源。
  • 优化你的 manifest:manifest.json 与每个目标浏览器都兼容。
  • 有意识地命名产物:--zip-filename 让 CI 产物命名保持稳定。
  • 逐个目标验证输出: 发布前检查每一个 dist/<browser> 目录。

下一步