ESBuild

• evanw/esbuild
  • MIT, Go
  • bundler & minifier
• used by Vite, Snowpack
• roadmap
• esbuild.github.io/api
  • esbuild.github.io
    • 包含性能对比
    • 目前暂无 swc
      • esbuild#762
      • swc not ready
• Playground

esbuild example.js --outfile=out.js
esbuild --bundle main.ts --outdir=dist --minify --sourcemap

# for Node
esbuild --bundle main.ts --outfile=dist/out.js --platform=node --format=esm

# bundle mutiple files
pnpm esbuild --outdir=dist $(jq '.bundle.input | join (" ")' package.json -r) --format=esm --charset=utf8 --target=chrome90 --sourcemap --bundle

# transform
esbuild $(find src \( -name '*.ts' -o -name '*.tsx' \)) --outdir=out

esbuild src/modules/*/{index.tsx,manifest.json} --serve=8000 --splitting --outdir=out --format=esm --bundle --charset=utf8 --target=chrome90 --sourcemap --minify

# stdin -> stdout
echo 'export const OK = process.env.NODE_ENV === "producation"' | pnpm exec esbuild --format=esm

| flag | | ------------------------------- | ------------------------- | | --bundle | 包含所有依赖 | | --loader:.js=jsx | 允许 js 包含 jsx 语法 | | --define

• --platform
  • browser
    • 隐含: --format=iife --condition=browser --define
      .env.NODE_ENV="production" --main-fields=browser,module,main
    • 隐含: --format=iife --condition=browser --define
      .env.NODE_ENV="production" --main-fields=browser,module,main
    • 使用 package.json 中的 browser
      • 例如: path -> path-browserify
    • main - 如果没有 browser 有 main 和 module 则会先用 main - cjs 更兼容
  • node
    • 隐含: --format=cjs --condition=node --main-fields=module,main --external=fs,url,http
    • 自动 external node 的内建 api
  • neutral
    • 隐含: --format=esm
• --minify
  • --minify-whitespace
  • --minify-identifiers
  • --minify-syntax - 移除 if(false) 代码
  • Considerations
• --external:
  • /assets/*.png
  • @foo/bar 隐含 @foo/bar/*
• --target
  • chrome, edge, firefox, hermes, ie, ios, node, opera, rhino, safari
  • 可以更详细
    • esnext, es2020, es5, es5, node12, node19
    • chrome90
  • 也可以使用 supported 控制特性
• --supported - esbuild.github.io/api
• --sourcemap
  • linked - //# sourceMappingURL=
  • external - 无 sourceMappingURL
  • inline
  • both
• --servedir
  • 配合 script 使用
  • <script src="js/app.js"></script>
• --loader
  • js - .js, .cjs, .mjs
  • ts - .ts, .tsx, .mts, .cts
  • jsx/tsx - .jsx
  • json - .json
  • css - .css
  • text - .txt
  • binary
    • Uint8Array
    • uint8array.buffer -> ArrayBuffer
  • base64
  • dataurl
  • file
  • copy
    • 复制文件到 outdir - 修改 import 路径
• cdn url
  • unpkg.com
  • egoist/play-esbuild/src/lib/esbuild.ts#L34

analyze

• esbuild.github.io/analyze

只 bundle 内部文件

const path = require('path');
const pkg = require(path.resolve('./package.json'));

const external = [
  ...Object.keys(pkg.dependencies || {}),
  ...Object.keys(pkg.peerDependencies || {}),
  'react-is',
  'shallowequal',
  'hoist-non-react-statics',
].sort();

console.log(`externals`, external);

require('esbuild').buildSync({
  entryPoints: ['admin/src/components/Wysiwyg/index.js'],
  loader: { '.js': 'jsx' },
  format: 'esm',
  bundle: true,
  minify: false,
  sourcemap: false,
  target: ['esnext'],
  outfile: 'dist/Wysiwyg.esm.js',
  external,
  logLevel: 'info',
});

grep '^// ' ./dist/Wysiwyg.esm.js                     # bundled
grep '^// ' ./dist/Wysiwyg.esm.js | grep node_modules # bundled externals

Plugins

• esbuild/community-plugins
• esbuild.github.io/plugins
• mdxjs.com/packages/esbuild
  • @mdx-js/esbuild

Spliting

• 试验阶段
• 提取多个 entrypoint 的 common 部分
• esbuild.github.io/api

esbuild home.ts about.ts --bundle --splitting --outdir=out --format=esm

Dynamic require of "fs" is not supported

• esbuild#1921

__dirname and __filename

• format 为 esm 的时候可能出现
• 添加 banner 解决

# __dirname, __filename 用动态 import 构建，避免冲突
npx esbuild --banner:js="import { createRequire } from 'module';const require = createRequire(import.meta.url);var __filename;var __dirname;{const {fileURLToPath} = await import('url');const {dirname} = await import('path');var __filename = fileURLToPath(import.meta.url); __dirname = dirname(__filename)};"

var require, __filename, __dirname;
{
  const { createRequire } = await import('node:module');
  require ||= createRequire(import.meta.url);
}
{
  const { fileURLToPath } = await import('node:url');
  const { dirname } = await import('node:path');
  __filename ||= fileURLToPath(import.meta.url);
  __dirname ||= dirname(__filename);
}

• esbuild#1921

The presence of "exports" here makes importing a directory forbidden:

• 需要添加 index.js

transpiling external modules

• remix#1423

Transforming JavaScript decorators to the configured target environment ("node18.16.0") is not supported yet

• esbuild#104

FAQ

不支持

• 函数体内的死代码消除
• 函数内联
• 跨语句的常量传播
• 对象形状建模
• 内存分配下沉
• 方法去虚拟化
• 符号执行
• JSX 表达式提升
• TypeScript 枚举的检测与内联