Framework
Workflows
Production Build

製品版ビルドの作成

配布用の製品版バンドルを作成するには、以下のコマンドを実行します。

pnpm build
# または
npm run build

zip バンドルの生成

Webストアにアップロードする準備ができた製品版zipバンドルを作成するには、packageコマンドを使用します。

pnpm package
# または
npm run package

ビルドとパッケージ化のプロセスを組み合わせる場合は、代わりにbuildコマンドに--zipフラグを使用します。

pnpm build --zip
# または
npm run build -- --zip

特定のターゲットを指定して

buildコマンドは、<browser-name>-<manifest-version>形式の--targetフラグを受け入れます。これを用いて、ビルド対象のブラウザとマニフェストバージョンの組み合わせを指定します。

plasmo build --target=firefox-mv2

最終的なバンドルはbuild/firefox-mv2-prodディレクトリで使用できます。ターゲットブラウザとマニフェストバージョンの組み合わせは任意です。

公式にサポートされているターゲットのリストについては、このリンクをご覧ください。これらのターゲットはバンドラによって認識され、いくつかのベンダー固有の動作が自動的に処理されます。

--targetフラグを使用すると、次のこともできます。

  • ターゲット固有の環境ファイルを使用する：.env.<browser-name>
  • ターゲット固有のエントリファイルを使用する：例 popup.<browser-name>.tsx
  • process.env.PLASMO_BROWSERを<browser-name>に設定する

3つ目の機能はデッドコード除去と共に動作します。そのため、次のコード：

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 (opens in a new tab)レポートを生成できます。

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

最適化

ミニファイを無効にしたバンドルを作成するには：

plasmo build --no-minify

バンドルが依存関係の重複を除去し、依存関係をバンドルの先頭にホイスティングするインポート最適化されたビルドを作成するには：

plasmo build --hoist

ホイスティングは、特にプラグインシステムを介して動的な依存関係をインポートする依存関係を壊す可能性があることに注意してください。ただし、ホイスティングはバンドル速度を大幅に向上させ、バンドルのサイズを縮小できます。

必要に応じてこれらのフラグを組み合わせることができます。

Development ServerSubmission