vs esbuild

Bun 的捆綁器 API 在很大程度上受到 esbuild 的啟發。從 esbuild 遷移到 Bun 的捆綁器應該相對輕鬆。本指南將簡要解釋您可能考慮遷移到 Bun 捆綁器的原因，並為那些已經熟悉 esbuild API 的人提供並排 API 比較參考。

有幾個行為差異需要注意。

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

效能

憑藉以效能為導向的 API 以及經過廣泛最佳化的基於 Zig 的 JS/TS 解析器，在 esbuild 的 three.js 基準測試中，Bun 的捆綁器比 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]",
  },
});

await 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

選項

引數

結果