Bun のバンドラー API は、esbuild から大きくインスピレーションを受けています。esbuild から Bun のバンドラーへの移行は比較的簡単です。このガイドでは、なぜ Bun のバンドラーへの移行を検討するべきなのかを説明し、esbuild の API に慣れている人のために API の並列比較リファレンスを提供します。

いくつかの動作の違いに注意してください。

NOTE

**デフォルトでバンドル。** esbuild とは異なり、Bun は常にデフォルトでバンドルします。これが、Bun の例で `--bundle` フラグが不要な理由です。各ファイルを個別にトランスパイルするには、`Bun.Transpiler` を使用します。

NOTE

**バンドラーのみ。** esbuild とは異なり、Bun のバンドラーには組み込みの開発サーバーやファイルウォッチャーは含まれていません。 単なるバンドラーです。バンドラーは、`Bun.serve` やその他のランタイム API と組み合わせて使用し、同じ効果を実現することを意図しています。そのため、HTTP/ファイルウォッチに関するすべてのオプションは適用されません。

パフォーマンス

パフォーマンスを重視した API と、高度に最適化された Zig ベースの JS/TS パーサーを組み合わせることで、Bun のバンドラーは esbuild の three.js ベンチマークで esbuild より 1.75 倍高速です。

CLI API

Bun と esbuild はどちらもコマンドラインインターフェースを提供しています。

# esbuild
esbuild <entrypoint> --outdir=out --bundle

# bun
bun build <entrypoint> --outdir=out

Bun の CLI では、--minify のような単純なブールフラグは引数を受け付けません。--outdir <path> のような他のフラグは引数を受け付けます。これらのフラグは --outdir out または --outdir=out と記述できます。--define のような一部のフラグは複数回指定できます：--define foo=bar --define bar=baz。

esbuild	bun build	備考
--bundle	n/a	Bun は常にバンドルします。この動作を無効にするには --no-bundle を使用します。
--define:K=V	--define K=V	小さな構文の違い。コロンなし。 esbuild --define:foo=bar bun build --define foo=bar
--external:<pkg>	--external <pkg>	小さな構文の違い。コロンなし。 esbuild --external:react bun build --external react
--format	--format	Bun は現在 "esm" と "cjs" をサポートしていますが、より多くのモジュールフォーマットが計画されています。esbuild はデフォルトで "iife" です。
--loader:.ext=loader	--loader .ext:loader	Bun は esbuild とは異なる組み込みローダーのセットをサポートしています。完全なリファレンスについては Bundler > Loaders を参照してください。esbuild ローダーの dataurl、binary、base64、copy、empty はまだ実装されていません。 --loader の構文は少し異なります。 esbuild app.ts --bundle --loader:.svg=text bun build app.ts --loader .svg:text
--minify	--minify	違いはありません
--outdir	--outdir	違いはありません
--outfile	--outfile	違いはありません
--packages	--packages	違いはありません
--platform	--target	tsconfig との一貫性のために --target に変更されました。neutral はサポートされていません。
--serve	n/a	適用されません
--sourcemap	--sourcemap	違いはありません
--splitting	--splitting	違いはありません
--target	n/a	サポートされていません。Bun のバンドラーは現時点で構文のダウングレードを実行しません。
--watch	--watch	違いはありません
--allow-overwrite	n/a	上書きは許可されません
--analyze	n/a	サポートされていません
--asset-names	--asset-naming	JS API の naming との一貫性のために変更されました
--banner	--banner	js バンドルにのみ適用されます
--footer	--footer	js バンドルにのみ適用されます
--certfile	n/a	適用されません
--charset=utf8	n/a	サポートされていません
--chunk-names	--chunk-naming	JS API の naming との一貫性のために変更されました
--color	n/a	常に有効
--drop	--drop
--entry-names	--entry-naming	JS API の naming との一貫性のために変更されました
--global-name	n/a	適用されません。Bun は現時点で iife 出力をサポートしていません
--ignore-annotations	--ignore-dce-annotations
--inject	n/a	サポートされていません
--jsx	--jsx-runtime <runtime>	"automatic"（jsx 変換を使用）と "classic"（React.createElement を使用）をサポート
--jsx-dev	n/a	Bun は tsconfig.json から compilerOptions.jsx を読み取り、デフォルトを決定します。compilerOptions.jsx が "react-jsx" の場合、または NODE_ENV=production の場合、Bun は jsx 変換を使用します。それ以外の場合、jsxDEV を使用します。バンドラーは preserve をサポートしていません。
--jsx-factory	--jsx-factory
--jsx-fragment	--jsx-fragment
--jsx-import-source	--jsx-import-source
--jsx-side-effects	n/a	JSX は常に副作用がないと見なされます
--keep-names	n/a	サポートされていません
--keyfile	n/a	適用されません
--legal-comments	n/a	サポートされていません
--log-level	n/a	サポートされていません。これは bunfig.toml で logLevel として設定できます。
--log-limit	n/a	サポートされていません
--log-override:X=Y	n/a	サポートされていません
--main-fields	n/a	サポートされていません
--mangle-cache	n/a	サポートされていません
--mangle-props	n/a	サポートされていません
--mangle-quoted	n/a	サポートされていません
--metafile	n/a	サポートされていません
--minify-whitespace	--minify-whitespace
--minify-identifiers	--minify-identifiers
--minify-syntax	--minify-syntax
--out-extension	n/a	サポートされていません
--outbase	--root
--preserve-symlinks	n/a	サポートされていません
--public-path	--public-path
--pure	n/a	サポートされていません
--reserve-props	n/a	サポートされていません
--resolve-extensions	n/a	サポートされていません
--servedir	n/a	適用されません
--source-root	n/a	サポートされていません
--sourcefile	n/a	サポートされていません。Bun はまだ stdin 入力をサポートしていません。
--sourcemap	--sourcemap	違いはありません
--sources-content	n/a	サポートされていません
--supported	n/a	サポートされていません
--tree-shaking	n/a	常に true
--tsconfig	--tsconfig-override
--version	n/a	Bun のバージョンを確認するには bun --version を実行します。

JavaScript API

esbuild.build()	Bun.build()	備考
absWorkingDir	n/a	常に process.cwd() に設定
alias	n/a	サポートされていません
allowOverwrite	n/a	常に false
assetNames	naming.asset	esbuild と同じテンプレート構文を使用しますが、[ext] を明示的に含める必要があります。 ts<br/>Bun.build({<br/> entrypoints: ["./index.tsx"],<br/> naming: {<br/> asset: "[name].[ext]",<br/> },<br/>});<br/>
banner	n/a	サポートされていません
bundle	n/a	常に true。バンドルなしでトランスパイルするには Bun.Transpiler を使用します。
charset	n/a	サポートされていません
chunkNames	naming.chunk	esbuild と同じテンプレート構文を使用しますが、[ext] を明示的に含める必要があります。 ts<br/>Bun.build({<br/> entrypoints: ["./index.tsx"],<br/> naming: {<br/> chunk: "[name].[ext]",<br/> },<br/>});<br/>
color	n/a	Bun はビルド結果の logs プロパティでログを返します。
conditions	n/a	サポートされていません。エクスポート条件の優先順位は target によって決定されます。
define	define
drop	n/a	サポートされていません
entryNames	naming または naming.entry	Bun は文字列またはオブジェクトのいずれかである naming キーをサポートします。esbuild と同じテンプレート構文を使用しますが、[ext] を明示的に含める必要があります。 ts<br/>Bun.build({<br/> entrypoints: ["./index.tsx"],<br/> // 文字列の場合、これは entryNames と同等です<br/> naming: "[name].[ext]",<br/><br/> // 細かい命名オプション<br/> naming: {<br/> entry: "[name].[ext]",<br/> asset: "[name].[ext]",<br/> chunk: "[name].[ext]",<br/> },<br/>});<br/>
entryPoints	entrypoints	大文字小文字の違い
external	external	違いはありません
footer	n/a	サポートされていません
format	format	現在 "esm" のみをサポートしています。"cjs" と "iife" のサポートは計画されています。
globalName	n/a	サポートされていません
ignoreAnnotations	n/a	サポートされていません
inject	n/a	サポートされていません
jsx	jsx	JS API ではサポートされていません。tsconfig.json で設定します
jsxDev	jsxDev	JS API ではサポートされていません。tsconfig.json で設定します
jsxFactory	jsxFactory	JS API ではサポートされていません。tsconfig.json で設定します
jsxFragment	jsxFragment	JS API ではサポートされていません。tsconfig.json で設定します
jsxImportSource	jsxImportSource	JS API ではサポートされていません。tsconfig.json で設定します
jsxSideEffects	jsxSideEffects	JS API ではサポートされていません。tsconfig.json で設定します
keepNames	n/a	サポートされていません
legalComments	n/a	サポートされていません
loader	loader	Bun は esbuild とは異なる組み込みローダーのセットをサポートしています。完全なリファレンスについては Bundler > Loaders を参照してください。esbuild ローダーの dataurl、binary、base64、copy、empty はまだ実装されていません。
logLevel	n/a	サポートされていません
logLimit	n/a	サポートされていません
logOverride	n/a	サポートされていません
mainFields	n/a	サポートされていません
mangleCache	n/a	サポートされていません
mangleProps	n/a	サポートされていません
mangleQuoted	n/a	サポートされていません
metafile	n/a	サポートされていません
minify	minify	Bun では、minify はブール値またはオブジェクトにできます。 ts<br/>await Bun.build({<br/> entrypoints: ['./index.tsx'],<br/> // すべてのミニファイを有効にする<br/> minify: true<br/><br/> // 細かいオプション<br/> minify: {<br/> identifiers: true,<br/> syntax: true,<br/> whitespace: true<br/> }<br/>})<br/>
minifyIdentifiers	minify.identifiers	minify を参照
minifySyntax	minify.syntax	minify を参照
minifyWhitespace	minify.whitespace	minify を参照
nodePaths	n/a	サポートされていません
outExtension	n/a	サポートされていません
outbase	root	名前が異なります
outdir	outdir	違いはありません
outfile	outfile	違いはありません
packages	n/a	サポートされていません。external を使用します
platform	target	"bun"、"node"、"browser"（デフォルト）をサポートしています。"neutral" はサポートされていません。
plugins	plugins	Bun のプラグイン API は esbuild のサブセットです。一部の esbuild プラグインは Bun ですぐに動作します。
preserveSymlinks	n/a	サポートされていません
publicPath	publicPath	違いはありません
pure	n/a	サポートされていません
reserveProps	n/a	サポートされていません
resolveExtensions	n/a	サポートされていません
sourceRoot	n/a	サポートされていません
sourcemap	sourcemap	"inline"、"external"、"none" をサポート
sourcesContent	n/a	サポートされていません
splitting	splitting	違いはありません
stdin	n/a	サポートされていません
supported	n/a	サポートされていません
target	n/a	構文のダウングレードはサポートされていません
treeShaking	n/a	常に true
tsconfig	n/a	サポートされていません
write	n/a	outdir/outfile が設定されている場合は true、それ以外の場合は false

プラグイン API

Bun のプラグイン API は esbuild 互換になるように設計されています。Bun は esbuild のプラグイン API 全体をサポートしているわけではありませんが、コア機能は実装されています。多くのサードパーティ製 esbuild プラグインは、Bun ですぐに動作します。

NOTE

長期的には、esbuild の API と機能の同等性を目指しています。そのため、何か動作しない場合は、優先順位を付けるために issue を作成してください。

Bun と esbuild のプラグインは、ビルダーオブジェクトで定義されます。

import type { BunPlugin } from "bun";

const myPlugin: BunPlugin = {
  name: "my-plugin",
  setup(builder) {
    // プラグインを定義
  },
};

ビルダーオブジェクトは、バンドルプロセスの一部にフックするためのいくつかのメソッドを提供します。Bun は onResolve と onLoad を実装しています。esbuild フックの onStart、onEnd、onDispose、および resolve ユーティリティはまだ実装されていません。initialOptions は部分的に実装されており、読み取り専用で esbuild のオプションのサブセットのみを持っています。代わりに config（同じものですが Bun の BuildConfig 形式）を使用してください。

import type { BunPlugin } from "bun";
const myPlugin: BunPlugin = {
  name: "my-plugin",
  setup(builder) {
    builder.onResolve(
      {
        /* onResolve.options */
      },
      args => {
        return {
          /* onResolve.results */
        };
      },
    );
    builder.onLoad(
      {
        /* onLoad.options */
      },
      args => {
        return {
          /* onLoad.results */
        };
      },
    );
  },
};

onResolve

options

- 🟢 `filter`
- 🟢 `namespace`

arguments

- 🟢 `path`
- 🟢 `importer`
- 🔴 `namespace`
- 🔴 `resolveDir`
- 🔴 `kind`
- 🔴 `pluginData`

results

- 🟢 `namespace`
- 🟢 `path`
- 🔴 `errors`
- 🔴 `external`
- 🔴 `pluginData`
- 🔴 `pluginName`
- 🔴 `sideEffects`
- 🔴 `suffix`
- 🔴 `warnings`
- 🔴 `watchDirs`
- 🔴 `watchFiles`

onLoad

options

- 🟢 `filter`
- 🟢 `namespace`

arguments

- 🟢 `path`
- 🔴 `namespace`
- 🔴 `suffix`
- 🔴 `pluginData`

results

- 🟢 `contents`
- 🟢 `loader`
- 🔴 `errors`
- 🔴 `pluginData`
- 🔴 `pluginName`
- 🔴 `resolveDir`
- 🔴 `warnings`
- 🔴 `watchDirs`
- 🔴 `watchFiles`