1
// esbuild 内部的并行解析（简化）
2
func (b *Bundle) parseFiles(entryPoints []string) {
3
    var wg sync.WaitGroup
4
    results := make(chan parseResult, len(entryPoints))
5

6
    for _, entry := range entryPoints {
7
        wg.Add(1)
8
        go func(path string) {
9
            defer wg.Done()
10
            // 每个文件在独立 goroutine 中解析
11
            ast := b.parseFile(path)
12
            results <- parseResult{path: path, ast: ast}
13
        }(entry)
14
    }
15

16
    go func() {
17
        wg.Wait()
18
        close(results)
19
    }()
20

21
    for result := range results {
22
        b.files[result.path] = result.ast
23
    }
24
}

1
// 简化的一次遍历示例
2
func (p *printer) printExpr(expr Expr) {
3
    switch e := expr.Data.(type) {
4
    case *EBinary:
5
        // 常量折叠（压缩）
6
        if result, ok := foldBinary(e); ok {
7
            p.printExpr(result)
8
            return
9
        }
10
        p.printExpr(e.Left)
11
        p.print(e.Op.String())
12
        p.printExpr(e.Right)
13

14
    case *ECall:
15
        // 同时检查是否可以 tree shake
16
        if p.isUnused(expr) && p.canTreeShake(e) {
17
            return // 跳过死代码
18
        }
19
        p.printExpr(e.Target)
20
        p.print("(")
21
        for i, arg := range e.Args {
22
            if i > 0 { p.print(",") }
23
            p.printExpr(arg)
24
        }
25
        p.print(")")
26
    }
27
}

1
// esbuild 的 AST 节点使用紧凑的 tagged union
2
type Expr struct {
3
    Loc  Loc
4
    Data E  // 接口类型，但实际类型在编译时确定
5
}
6

7
// 而不是像 Babel 那样每个节点都是一个大对象
8
// {
9
//   type: "BinaryExpression",
10
//   start: 0,
11
//   end: 10,
12
//   left: { ... },
13
//   right: { ... },
14
//   operator: "+",
15
//   // ... 更多元数据
16
// }

1
// 带有 live reload 的开发服务器
2
const ctx = await esbuild.context({
3
  entryPoints: ['src/index.ts'],
4
  bundle: true,
5
  outdir: 'dist',
6
  sourcemap: true,
7
});
8

9
// 启动开发服务器
10
const { host, port } = await ctx.serve({
11
  servedir: 'dist',
12
  port: 3000,
13
});
14

15
console.log(`Server running at http://${host}:${port}`);
16

17
// 启动 watch 模式
18
await ctx.watch();
19
console.log('Watching for changes...');

1
import * as esbuild from 'esbuild';
2

3
// TypeScript → JavaScript
4
const result = await esbuild.transform(`
5
  const greet = (name: string): string => {
6
    return \`Hello, \${name}!\`;
7
  };
8
  export default greet;
9
`, {
10
  loader: 'ts',
11
  target: 'es2015',
12
  minify: true,
13
});
14

15
console.log(result.code);
16
// var e=e=>\"Hello, \"+e+\"!\";export{e as default};
17

18
// JSX → JavaScript
19
const jsxResult = await esbuild.transform(`
20
  const App = () => <div class="app">Hello</div>;
21
`, {
22
  loader: 'jsx',
23
  jsxFactory: 'h',
24
  jsxFragment: 'Fragment',
25
});
26

27
console.log(jsxResult.code);
28
// const App = () => h("div", { class: "app" }, "Hello");

1
// Webpack: 每个 loader 都要解析和序列化 AST
2
module: {
3
  rules: [
4
    {
5
      test: /\.ts$/,
6
      use: [
7
        'babel-loader',    // 解析 → AST → 转换 → 序列化
8
        'ts-loader',       // 解析 → AST → 转换 → 序列化
9
      ]
10
    }
11
  ]
12
}
13
// 同一个文件被解析了多次！
14

15
// esbuild: 一次解析，一次输出
16
// TypeScript 解析、转换、压缩在一次遍历中完成

1
// esbuild 可能无法 shake 掉的情况
2

3
// 1. 带副作用的模块
4
import './polyfill'; // esbuild 不会移除，即使没使用任何导出
5

6
// 2. IIFE 中的副作用
7
const result = (() => {
8
  // esbuild 可能认为这有副作用而保留
9
  return { value: 42 };
10
})();
11

12
// 3. 类的静态属性
13
class MyClass {
14
  static instance = new MyClass(); // 有副作用，不会被移除
15
}
16

17
// 可以用注释标记为纯函数
18
const result = /* @__PURE__ */ createSomething();

1
const ctx = await esbuild.context({
2
  entryPoints: ['src/index.ts'],
3
  bundle: true,
4
  outfile: 'dist/bundle.js',
5
  // 增量构建会缓存 AST 和中间结果
6
  // 后续 rebuild 只处理变更的文件
7
});
8

9
// 首次构建
10
await ctx.rebuild(); // ~500ms
11

12
// 修改一个文件后
13
await ctx.rebuild(); // ~50ms（增量）
14

15
await ctx.dispose();