vs esbuild

Bun 的 bundler API 主要受到 esbuild 的啟發。從 esbuild 遷移到 Bun 的 bundler 應該相對容易。本指南將簡要說明您可能考慮遷移到 Bun 的 bundler 的原因，並提供一個並排的 API 比較參考，供已熟悉 esbuild 的 API 的人使用。

有一些行為差異需要注意。

• 預設打包。與 esbuild 不同，Bun 預設總是打包。這就是為什麼在 Bun 範例中不需要 --bundle 旗標。若要個別轉譯每個檔案，請使用 Bun.Transpiler。
• 它只是一個 bundler。與 esbuild 不同，Bun 的 bundler 不包含內建的開發伺服器或檔案監控器。它只是一個 bundler。bundler 旨在與 Bun.serve 和其他執行時期 API 結合使用，以達到相同的效果。因此，所有與 HTTP/檔案監控相關的選項都不適用。

效能

Bun 的 bundler 結合了效能導向的 API，以及高度最佳化的基於 Zig 的 JS/TS 解析器，在 esbuild 的 three.js 基準測試 中，比 esbuild 快 1.75 倍。

CLI API

Bun 和 esbuild 都提供命令列介面。

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

bun build <entrypoint> --outdir=out

在 Bun 的 CLI 中，像 --minify 這樣的簡單布林旗標不接受參數。像 --outdir <path> 這樣的其他旗標接受參數；這些旗標可以寫成 --outdir out 或 --outdir=out。某些旗標，例如 --define，可以指定多次：--define foo=bar --define bar=baz。

esbuild --define:foo=bar

bun build --define foo=bar

esbuild --external:react

bun build --external react

esbuild app.ts --bundle --loader:.svg=text

bun build app.ts --loader .svg:text

JavaScript API

Bun.build({
  entrypoints: ["./index.tsx"],
  naming: {
    asset: "[name].[ext]",
  },
});

Bun.build({
  entrypoints: ["./index.tsx"],
  naming: {
    chunk: "[name].[ext]",
  },
});

Bun.build({
  entrypoints: ["./index.tsx"],
  // when string, this is equivalent to entryNames
  naming: "[name].[ext]",

  // granular naming options
  naming: {
    entry: "[name].[ext]",
    asset: "[name].[ext]",
    chunk: "[name].[ext]",
  },
});

Bun.build({
  entrypoints: ['./index.tsx'],
  // enable all minification
  minify: true

  // granular options
  minify: {
    identifiers: true,
    syntax: true,
    whitespace: true
  }
})

外掛 API

Bun 的外掛 API 設計為與 esbuild 相容。Bun 不支援 esbuild 的所有外掛 API，但已實作核心功能。許多第三方 esbuild 外掛可以使用在 Bun 中。

Bun 和 esbuild 中的外掛是使用 builder 物件定義的。

import type { BunPlugin } from "bun";

const myPlugin: BunPlugin = {
  name: "my-plugin",
  setup(builder) {
    // define plugin
  },
};

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

選項

參數

結果

onLoad

選項

參數

結果