Skip to Content
LaunchExt | Chrome 扩展开发平台 (Next.js + Plasmo) 🚀 Read more → 

创建生产版本构建

要生成用于分发的生产环境包,请运行以下命令:

pnpm build # 或者 npm run build

生成 ZIP 压缩包

如需创建可直接上传到应用商店的 ZIP 格式生产包,请使用 package 命令:

pnpm package # 或者 npm run package

若希望将构建和打包步骤合并执行,可以在 build 命令中添加 --zip 标志:

pnpm build --zip # 或者 npm run build -- --zip

指定构建目标

build 命令支持 --target 标志,格式为 <浏览器名称>-<清单版本>,用于指定目标浏览器和清单版本的组合:

plasmo build --target=firefox-mv2

构建完成后,包文件将位于 build/firefox-mv2-prod 目录中。您可以自由组合任何支持的浏览器和清单版本。

有关官方支持的目标列表,请查看此链接。这些目标由打包器自动识别,并会处理特定于各浏览器的兼容性行为。

--target 标志还支持以下功能:

  • 使用目标特定的环境配置文件:.env.<浏览器名称>
  • 使用目标特定的入口文件:例如 popup.<浏览器名称>.tsx
  • process.env.PLASMO_BROWSER 环境变量设置为 <浏览器名称>

第三个功能与死代码消除(tree-shaking)配合使用。例如以下代码:

if (process.env.PLASMO_BROWSER === "safari") { console.log("A") } else { console.log("B") }

当构建目标为 safari-mv3 时,最终会被优化为 console.log("A")

使用自定义构建标签

Plasmo 默认使用 prod 标签标识生产构建。您可以通过 --tag 标志自定义此行为:

plasmo build --tag=staging

上述命令将:

  • build/chrome-mv3-staging 目录中生成构建包
  • process.env.PLASMO_TAG 环境变量设置为 staging
  • 优先使用 .env.staging.env.staging.local 配置文件(如果存在)

启用源映射生成

默认情况下,Plasmo 不会为生产构建生成源映射文件。如需启用此功能,请使用 --source-maps 标志:

plasmo build --source-maps

包分析工具 Bundle Buddy

如需分析构建包的内容,可以结合使用 --source-maps--bundle-buddy 标志来生成 Bundle Buddy  分析报告:

plasmo build --source-maps --bundle-buddy

构建优化选项

如需创建禁用代码压缩的构建包:

plasmo build --no-minify

如需创建导入优化的构建,其中重复依赖会被去重并提升到包顶部:

plasmo build --hoist

请注意,依赖提升功能可能会影响某些通过插件系统动态导入依赖的库。但此优化能显著提升打包速度并减小最终包体积。

您可以根据需要自由组合使用这些标志。

最后更新于