Bun 의 번들러 API 는 esbuild 에서 큰 영감을 받았습니다. esbuild 에서 Bun 번들러로의 마이그레이션은 비교적 고통스럽지 않아야 합니다. 이 가이드는 Bun 번들러로 마이그레이션을 고려할 수 있는 이유를 간략히 설명하고 이미 esbuild 의 API 에 익숙한 사람들을 위해 나란히 API 비교 참조를 제공합니다.

주의해야 할 몇 가지 동작 차이가 있습니다.

NOTE

**기본적으로 번들링.** esbuild 와 달리 Bun 은 항상 기본적으로 번들링합니다. 이것이 Bun 예제에서 `--bundle` 플래그가 필요하지 않은 이유입니다. 각 파일을 개별적으로 트랜스파일하려면 `Bun.Transpiler` 를 사용하세요.

NOTE

**그냥 번들러일 뿐입니다.** esbuild 와 달리 Bun 번들러에는 내장 개발 서버나 파일 감시기가 포함되어 있지 않습니다. 그냥 번들러일 뿐입니다. 번들러는 `Bun.serve` 및 기타 런타임 API 와 함께 사용하여 동일한 효과를 얻도록 설계되었습니다. 따라서 HTTP/파일 감시와 관련된 모든 옵션은 적용되지 않습니다.

성능

성능 중심의 API 와 광범위하게 최적화된 Zig 기반 JS/TS 파서와 결합되어 Bun 번들러는 esbuild 의 three.js 벤치마크에서 esbuild 보다 1.75 배 빠릅니다.

CLI API

Bun 과 esbuild 모두 명령줄 인터페이스를 제공합니다.

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

# bun
bun build <entrypoint> --outdir=out

Bun 의 CLI 에서 --minify 와 같은 간단한 불리언 플래그는 인수를 받지 않습니다. --outdir <path> 와 같은 다른 플래그는 인수를 받습니다. 이러한 플래그는 --outdir out 또는 --outdir=out 로 작성할 수 있습니다. --define 와 같은 일부 플래그는 여러 번 지정할 수 있습니다: --define foo=bar --define bar=baz.

esbuild	bun build	참고
--bundle	n/a	Bun 은 항상 번들링합니다. 이 동작을 비활성화하려면 --no-bundle 을 사용하세요.
--define:K=V	--define K=V	작은 구문 차이; 콜론 없음. esbuild --define:foo=bar bun build --define foo=bar
--external:<pkg>	--external <pkg>	작은 구문 차이; 콜론 없음. esbuild --external:react bun build --external react
--format	--format	Bun 은 현재 "esm" 과 "cjs" 를 지원하지만 더 많은 모듈 형식이 계획되어 있습니다. esbuild 는 기본적으로 "iife" 입니다.
--loader:.ext=loader	--loader .ext:loader	Bun 은 esbuild 와 다른 내장 로더 세트를 지원합니다. 전체 참조는 Bundler > Loaders 를 참조하세요. esbuild 로더 dataurl, binary, base64, copy, empty 는 아직 구현되지 않았습니다. --loader 의 구문이 약간 다릅니다. esbuild app.ts --bundle --loader:.svg=text bun build app.ts --loader .svg:text
--minify	--minify	차이 없음
--outdir	--outdir	차이 없음
--outfile	--outfile	차이 없음
--packages	--packages	차이 없음
--platform	--target	tsconfig 와의 일관성을 위해 --target 으로 이름 변경됨. neutral 을 지원하지 않습니다.
--serve	n/a	적용되지 않음
--sourcemap	--sourcemap	차이 없음
--splitting	--splitting	차이 없음
--target	n/a	지원되지 않음. Bun 의 번들러는 현재 구문 다운레벨링을 수행하지 않습니다.
--watch	--watch	차이 없음
--allow-overwrite	n/a	덮어쓰기는 허용되지 않음
--analyze	n/a	지원되지 않음
--asset-names	--asset-naming	JS API 의 이름 지정과의 일관성을 위해 이름 변경됨
--banner	--banner	js 번들에만 적용
--footer	--footer	js 번들에만 적용
--certfile	n/a	적용되지 않음
--charset=utf8	n/a	지원되지 않음
--chunk-names	--chunk-naming	JS API 의 이름 지정과의 일관성을 위해 이름 변경됨
--color	n/a	항상 활성화됨
--drop	--drop
--entry-names	--entry-naming	JS API 의 이름 지정과의 일관성을 위해 이름 변경됨
--global-name	n/a	적용되지 않음. Bun 은 현재 iife 출력을 지원하지 않습니다.
--ignore-annotations	--ignore-dce-annotations
--inject	n/a	지원되지 않음
--jsx	--jsx-runtime <runtime>	"automatic"(jsx 변환 사용) 및 "classic"(React.createElement 사용) 지원
--jsx-dev	n/a	Bun 은 tsconfig.json 의 compilerOptions.jsx 를 읽어 기본값을 결정합니다. compilerOptions.jsx 가 "react-jsx" 이거나 NODE_ENV=production 인 경우 Bun 은 jsx 변환을 사용합니다. 그렇지 않으면 jsxDEV 를 사용합니다. 번들러는 preserve 를 지원하지 않습니다.
--jsx-factory	--jsx-factory
--jsx-fragment	--jsx-fragment
--jsx-import-source	--jsx-import-source
--jsx-side-effects	n/a	JSX 는 항상 사이드 이펙트가 없는 것으로 간주됨
--keep-names	n/a	지원되지 않음
--keyfile	n/a	적용되지 않음
--legal-comments	n/a	지원되지 않음
--log-level	n/a	지원되지 않음. 이는 bunfig.toml 에서 logLevel 로 설정할 수 있습니다.
--log-limit	n/a	지원되지 않음
--log-override:X=Y	n/a	지원되지 않음
--main-fields	n/a	지원되지 않음
--mangle-cache	n/a	지원되지 않음
--mangle-props	n/a	지원되지 않음
--mangle-quoted	n/a	지원되지 않음
--metafile	n/a	지원되지 않음
--minify-whitespace	--minify-whitespace
--minify-identifiers	--minify-identifiers
--minify-syntax	--minify-syntax
--out-extension	n/a	지원되지 않음
--outbase	--root
--preserve-symlinks	n/a	지원되지 않음
--public-path	--public-path
--pure	n/a	지원되지 않음
--reserve-props	n/a	지원되지 않음
--resolve-extensions	n/a	지원되지 않음
--servedir	n/a	적용되지 않음
--source-root	n/a	지원되지 않음
--sourcefile	n/a	지원되지 않음. Bun 은 아직 stdin 입력을 지원하지 않습니다.
--sourcemap	--sourcemap	차이 없음
--sources-content	n/a	지원되지 않음
--supported	n/a	지원되지 않음
--tree-shaking	n/a	항상 true
--tsconfig	--tsconfig-override
--version	n/a	Bun 버전을 보려면 bun --version 을 실행하세요.

JavaScript API

esbuild.build()	Bun.build()	참고
absWorkingDir	n/a	항상 process.cwd() 로 설정됨
alias	n/a	지원되지 않음
allowOverwrite	n/a	항상 false
assetNames	naming.asset	esbuild 와 동일한 템플릿 구문을 사용하지만 [ext] 를 명시적으로 포함해야 합니다. ts<br/>Bun.build({<br/> entrypoints: ["./index.tsx"],<br/> naming: {<br/> asset: "[name].[ext]",<br/> },<br/>});<br/>
banner	n/a	지원되지 않음
bundle	n/a	항상 true. 번들링 없이 트랜스파일하려면 Bun.Transpiler 를 사용하세요.
charset	n/a	지원되지 않음
chunkNames	naming.chunk	esbuild 와 동일한 템플릿 구문을 사용하지만 [ext] 를 명시적으로 포함해야 합니다. ts<br/>Bun.build({<br/> entrypoints: ["./index.tsx"],<br/> naming: {<br/> chunk: "[name].[ext]",<br/> },<br/>});<br/>
color	n/a	Bun 은 빌드 결과의 logs 속성에서 로그를 반환합니다.
conditions	n/a	지원되지 않음. 내보내기 조건 우선순위는 target 에 의해 결정됩니다.
define	define
drop	n/a	지원되지 않음
entryNames	naming 또는 naming.entry	Bun 은 문자열 또는 객체가 될 수 있는 naming 키를 지원합니다. esbuild 와 동일한 템플릿 구문을 사용하지만 [ext] 를 명시적으로 포함해야 합니다. ts<br/>Bun.build({<br/> entrypoints: ["./index.tsx"],<br/> // 문자열일 때 entryNames 와 동일<br/> naming: "[name].[ext]",<br/><br/> // 세분화된 이름 지정 옵션<br/> naming: {<br/> entry: "[name].[ext]",<br/> asset: "[name].[ext]",<br/> chunk: "[name].[ext]",<br/> },<br/>});<br/>
entryPoints	entrypoints	대소문자 차이
external	external	차이 없음
footer	n/a	지원되지 않음
format	format	현재 "esm" 만 지원합니다. "cjs" 및 "iife" 지원이 계획되어 있습니다.
globalName	n/a	지원되지 않음
ignoreAnnotations	n/a	지원되지 않음
inject	n/a	지원되지 않음
jsx	jsx	JS API 에서 지원되지 않음. tsconfig.json 에서 구성하세요
jsxDev	jsxDev	JS API 에서 지원되지 않음. tsconfig.json 에서 구성하세요
jsxFactory	jsxFactory	JS API 에서 지원되지 않음. tsconfig.json 에서 구성하세요
jsxFragment	jsxFragment	JS API 에서 지원되지 않음. tsconfig.json 에서 구성하세요
jsxImportSource	jsxImportSource	JS API 에서 지원되지 않음. tsconfig.json 에서 구성하세요
jsxSideEffects	jsxSideEffects	JS API 에서 지원되지 않음. tsconfig.json 에서 구성하세요
keepNames	n/a	지원되지 않음
legalComments	n/a	지원되지 않음
loader	loader	Bun 은 esbuild 와 다른 내장 로더 세트를 지원합니다. 전체 참조는 Bundler > Loaders 를 참조하세요. esbuild 로더 dataurl, binary, base64, copy, empty 는 아직 구현되지 않았습니다.
logLevel	n/a	지원되지 않음
logLimit	n/a	지원되지 않음
logOverride	n/a	지원되지 않음
mainFields	n/a	지원되지 않음
mangleCache	n/a	지원되지 않음
mangleProps	n/a	지원되지 않음
mangleQuoted	n/a	지원되지 않음
metafile	n/a	지원되지 않음
minify	minify	Bun 에서 minify 는 불리언 또는 객체일 수 있습니다. ts<br/>await Bun.build({<br/> entrypoints: ['./index.tsx'],<br/> // 모든 축소 활성화<br/> minify: true<br/><br/> // 세분화된 옵션<br/> minify: {<br/> identifiers: true,<br/> syntax: true,<br/> whitespace: true<br/> }<br/>})<br/>
minifyIdentifiers	minify.identifiers	minify 참조
minifySyntax	minify.syntax	minify 참조
minifyWhitespace	minify.whitespace	minify 참조
nodePaths	n/a	지원되지 않음
outExtension	n/a	지원되지 않음
outbase	root	이름만 다름
outdir	outdir	차이 없음
outfile	outfile	차이 없음
packages	n/a	지원되지 않음. external 사용
platform	target	"bun", "node" 및 "browser"(기본값) 를 지원합니다. "neutral" 은 지원하지 않습니다.
plugins	plugins	Bun 의 플러그인 API 는 esbuild 의 하위 집합입니다. 일부 esbuild 플러그인은 Bun 에서 바로 작동합니다.
preserveSymlinks	n/a	지원되지 않음
publicPath	publicPath	차이 없음
pure	n/a	지원되지 않음
reserveProps	n/a	지원되지 않음
resolveExtensions	n/a	지원되지 않음
sourceRoot	n/a	지원되지 않음
sourcemap	sourcemap	"inline", "external" 및 "none" 지원
sourcesContent	n/a	지원되지 않음
splitting	splitting	차이 없음
stdin	n/a	지원되지 않음
supported	n/a	지원되지 않음
target	n/a	구문 다운레벨링 지원 없음
treeShaking	n/a	항상 true
tsconfig	n/a	지원되지 않음
write	n/a	outdir/outfile 이 설정되면 true, 그렇지 않으면 false

플러그인 API

Bun 의 플러그인 API 는 esbuild 와 호환되도록 설계되었습니다. Bun 은 esbuild 의 전체 플러그인 API 표면을 지원하지는 않지만 핵심 기능은 구현되어 있습니다. 많은 서드파티 esbuild 플러그인이 Bun 에서 바로 작동합니다.

NOTE

장기적으로 우리는 esbuild 의 API 와 기능 동등성을 목표로 하므로 작동하지 않는 것이 있으면 우선순위를 정하는 데 도움이 되도록 이슈를 제기해 주세요.

Bun 과 esbuild 의 플러그인은 빌더 객체로 정의됩니다.

import type { BunPlugin } from "bun";

const myPlugin: BunPlugin = {
  name: "my-plugin",
  setup(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

옵션

• 🟢 filter
• 🟢 namespace

인수

• 🟢 path
• 🟢 importer
• 🔴 namespace
• 🔴 resolveDir
• 🔴 kind
• 🔴 pluginData

결과

• 🟢 namespace
• 🟢 path
• 🔴 errors
• 🔴 external
• 🔴 pluginData
• 🔴 pluginName
• 🔴 sideEffects
• 🔴 suffix
• 🔴 warnings
• 🔴 watchDirs
• 🔴 watchFiles

onLoad

옵션

• 🟢 filter
• 🟢 namespace

인수

• 🟢 path
• 🔴 namespace
• 🔴 suffix
• 🔴 pluginData

결과

• 🟢 contents
• 🟢 loader
• 🔴 errors
• 🔴 pluginData
• 🔴 pluginName
• 🔴 resolveDir
• 🔴 warnings
• 🔴 watchDirs
• 🔴 watchFiles