跳到主要内容

esbuild

esbuild 是一个由 Figma 前 CTO Evan Wallace 基于 Go 语言开发的 JavaScript 打包工具。由于其极快的构建速度，esbuild 非常适合在开发环境中使用，例如作为 Vite 的依赖预打包工具

备注

当有新的替代品，将来未来，现在时可能已经被淘汰。

主要特性​

  1. 极快的构建速度：
    • esbuild 使用 Go 语言编写，能够充分利用多核 CPU 的优势，实现并行处理，从而大幅提升构建速度
    • 它从头到尾尽可能地复用一份 AST（抽象语法树）节点数据，减少内存占用，提高内存利用效率
  2. 支持多种模块格式：
    • esbuild 原生支持 ES6 模块、CommonJS 模块、AMD 和 UMD 等多种模块格式
  3. 支持现代 JavaScript 特性：
    • esbuild 支持 ES6、TypeScript 和 JSX 语法
  4. 内置的代码压缩和优化：
    • esbuild 支持代码压缩（minification）和 Tree Shaking（移除未使用的代码），从而减小输出文件的大小，提高运行效率
  5. 插件系统：
    • esbuild 提供了灵活的插件系统，允许开发者扩展其功能，实现自定义的构建逻辑

不足：​

  1. 缺乏 AST 操作能力：esbuild 无法对打包产物进行复杂的 AST 操作
  2. 不支持代码分割：当前版本的 esbuild 还不支持代码分割

基本配置​

import * as esbuild from 'esbuild'

await esbuild.build({
   // 入口点
   entryPoints: ['app.jsx'],
   // 捆绑文件
   bundle: true, // 意味着将所有导入的依赖项内联到文件本身中。
   // 输出位置
   outfile: 'out.js',
   // 目标
   target: ["esnext"], // 默认目标是，esnext这意味着默认情况下，esbuild 将假定所有最新的 JavaScript 和 CSS 功能都受支持。
   // 格式
   format: "esm", // 该esm格式可以在浏览器或 Node 中使用，但必须显式地将其加载为模块。
   // 资产名称
   assetNames: 'assets/[name]-[hash]',
   // 块名称
   chunkNames: 'chunks/[name]-[hash]',
   // JSX自动导入
   jsx: "automatic", // 如果你希望自动导入 JSX，并且你正在使用较新的 React 版本，那么你应该使用automaticJSX 模式。
   // 启用源映射
   sourcemap: true,
   // 节点捆绑
   platform: "node", // 如果您要打包将在 Node 中运行的代码
   // 外部的
   external: ["react", "react-dom"], // 导入内容不会被打包，而是会被保留使用格式
})

参考链接​

官网 https://esbuild.github.io/