跳轉到主要內容
為一個或多個瀏覽器目標產生正式版擴充功能產物。 build 會以 production 模式編譯你的擴充功能,並把輸出寫入 dist/<browser> 針對 monorepo/submodule 專案,請參見 環境變數 中的設定階段環境變數解析(先尋找專案根目錄,再退回到 workspace 根目錄)。

何時使用 build

  • 為 Chrome Web Store、Edge Add-ons 或 Firefox Add-ons 準備擴充功能套件。
  • 在持續整合(CI)工作中產生可重現的正式版產物。
  • 在送審前驗證正式版打包輸出,以及各瀏覽器目標之間的差異。

Build 指令功能

功能你可以得到的能力
正式版編譯為每個目標產生最佳化的擴充功能產物
多目標輸出在單一指令中建置多個瀏覽器目標
打包支援建立散布用的 zip 產物,並可選擇是否附帶原始碼包
友善 CI 的行為在自動化中讓建置輸出與命名保持可預期

用法

extension build [project-path] [options]

Build 輸出

執行 build 後,Extension.js 會為所選的瀏覽器目標產生最佳化檔案。輸出會放到 dist/,每個目標一個子資料夾。每個資料夾包含打包後的 JavaScript、CSS、HTML 與所需的執行階段資源。
對 TypeScript 專案,build 也會重新產生 extension-env.d.ts 全域型別宣告(與 dev 產生的同一份檔案), 讓 CI 上的 tsc --noEmit 不論先前是否跑過 dev 都能順利通過。 純 JavaScript 專案則會跳過這個步驟。
範例輸出結構:
dist/
├── chrome/
│   ├── manifest.json
│   ├── background/service_worker.js
│   ├── content_scripts/content-0.js
├── edge/
│   ├── manifest.json
│   ├── background/service_worker.js
│   ├── content_scripts/content-0.js

瀏覽器目標矩陣

目標類型範例說明
具名目標chromiumchromeedgefirefox建置一個特定瀏覽器目標
引擎目標chromium-basedgecko-basedfirefox-based適合以引擎家族為單位的工作流程
多目標chrome,firefox以逗號分隔的目標

引數與旗標

旗標別名用途預設值
[path]-建置本地擴充功能專案。process.cwd()
--browser <browser>-瀏覽器/引擎目標(chromiumchromeedgefirefox、引擎別名,或逗號分隔的值)。chromium
--polyfill [boolean]-為 Chromium 目標啟用 browser.* API 相容性 polyfill。false
--zip [boolean]-產生打包好的 zip 產物。false
--zip-source [boolean]-在 zip 輸出中包含原始檔。false
--zip-filename <name>-設定自訂 zip 檔名。擴充功能名稱 + 版本
--silent [boolean]-隱藏建置記錄。false
--mode <mode>-覆寫打包工具模式(developmentproductionnone),同時會設定 NODE_ENVproduction
--extensions <list>-以逗號分隔的搭配擴充功能或 store URL。未設
--install [boolean]-當缺少時安裝專案相依套件。依指令行為而定
--author--author-mode啟用維護者診斷。停用

共用全域選項

也支援 全域旗標

模式覆寫

--mode 會覆寫此次建置的打包工具模式與 NODE_ENV。接受 developmentproductionnone。當你需要在 staging 或除錯場景使用非正式版打包時,可用它對齊 Vite/webpack 的工作流程。
extension build ./my-extension --mode development
無效的值會以錯誤結束;預設仍為 production

Zip 行為

選項效果典型用途
--zip產生打包好的 zip 產物商店送審 / 手動散布
--zip-filename設定自訂 zip 名稱CI 的命名規則
--zip-source在產物旁附加原始碼壓縮檔合規 / 審查流程

範例

使用 zip 輸出與自訂檔名建置

extension build ./my-extension --browser=edge,chrome --zip --zip-filename=my-extension.zip
此範例的建置會以 Edge 與 Chrome 為目標,將輸出壓縮成 zip,並儲存為 my-extension.zip

帶有 polyfill 支援的建置

extension build ./my-extension --browser=chrome,firefox --polyfill
此範例的建置會以 Chrome 與 Firefox 為目標,並在合適情境下包含 polyfill 支援。

同時建置原始碼與產物 zip

extension build ./my-extension --zip --zip-source

最佳實務

  • 檢視建置記錄: 每次建置後檢查警告與遺漏的資源。
  • 最佳化 manifest:manifest.json 與每個目標瀏覽器相容。
  • 有意義地命名產物: 使用 --zip-filename 讓 CI 產物有穩定名稱。
  • 驗證每個目標輸出: 在發布前檢查各個 dist/<browser> 資料夾。

後續步驟