esbuild

[gnosis23]

开一个新坑

特点

• 速度快
• 支持 JSX、TypeScript
• 代码压缩
• 插件系统

缺乏特性

• 不支持AST操作
• 不能代码切割

资源

• awesome esbuild
• esbuild/community-plugins

[gnosis23]

代码切割

通过 splitting 选项开启（仅支持esm输出）

esbuild.build({
  entryPoints: [
    'src/main.js'
  ],
  bundle: true,
  format: 'esm',
  outdir: './build',
  splitting: true,
  plugins: []
}).catch(err => process.exit(1))

代码中需要使用 dynamic import 语法

window.a = () => import('./app.jsx');

[gnosis23]

生态

• tsup
• esbuild-dev-server

[gnosis23]

plugin

let plugin = {
  name: 'plugin-name',
  setup(build) {
    // onResolve可以把文件分到对应的namespace里，在onLoad里处理
    // onResolve到的文件还会递归onResolve
    build.onResolve({ filter: Reg }, args => ({
      path: args.path,
      namespace: 'plugin-namespace'
    }))
    build.onLoad({ filter: Reg2, namespace: 'plugin-namespace' }, async args => {
      return { contents }
      // return { errors }
    })
  }
}