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

options

arguments

results

onLoad

options

arguments

results