对比 esbuild

Bun 的打包器 API 主要受 esbuild 启发。从 esbuild 迁移到 Bun 的打包器应该相对轻松。本指南将简要解释为什么你可能考虑迁移到 Bun 的打包器，并为已经熟悉 esbuild API 的人提供一个并排的 API 比较参考。

需要注意一些行为差异。

• 默认情况下进行打包。与 esbuild 不同，Bun 始终默认进行打包。这就是为什么 Bun 示例中不需要 --bundle 标志。要单独转换每个文件，请使用 Bun.Transpiler。
• 它只是一个打包器。与 esbuild 不同，Bun 的打包器不包含内置开发服务器或文件监视器。它只是一个打包器。打包器旨在与 Bun.serve 和其他运行时 API 结合使用，以实现相同的效果。因此，所有与 HTTP/文件监视相关的选项均不适用。

性能

Bun 的捆绑器结合了注重性能的 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

选项

参数

结果