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 解析器，Bun 的打包器在 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]",
  },
});

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 格式相同，但具有 Bun 的格式）而不是。

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