什么是Bable？SWC？esbuild？

Rubin93
2,907 阅读7分钟

Bable是什么？

babel作用

  1. babel 将 ES6/ES7/ES8 等新特性（如 let/const、箭头函数、类、模板字符串、解构赋值、可选链等）转换为 ES5 或更低版本。
  2. 支持 TypeScript、JSX（React）、Flow 等非标准语法的编译。

bable功能示例：如何转jsx高级js语法糖

babel工作方式：

  • Polyfill 填充，通过 @babel/polyfill 或 core-js，为不支持新特性的环境提供兼容性支持（例如 Promise、Array.from、Symbol 等）。

实现原理：

  1. 判断 'filter' in Array.prototype
  2. 如果没有，则添加垫片 Array.prototype.filter = function () {}

bable插件：开发自定义插件

import fs from 'node/fs'
import babel from '@bable/core'
const filedata = fs.readFileSync('src/file.js','utf-8')

// 自定义插件，type包含了ast节点的所有方法
const myBabelPlugin = ({ type: t }) => {
    return {
        name: 'my-plugin箭头函数',
        visitor: {
            ArrowFunctionExpression (path) {
                const node = path.node
                const arrfn = t.functionExpression(
                    null,
                    node.params,
                    t.blockStatement(t.returnStatement(node.body)),
                    node.async
                )
                path.replaceWith(arrfn)
            }
        }	
    }
}
babel.transform(filedata, {
    presets: [],
    plugins: [
        myBabelPlugin
    ]
})

bable插件介绍

@babel/core
  1. @babel/core 是 Babel 的核心运行库，它负责将你的 JavaScript 代码进行 解析（Parse）→ 转换（Transform）→ 生成（Generate） 的完整流程。
  2. 它是整个 Babel 工具链中最核心的包，其他工具如 @babel/cli、@babel/preset-env、@babel/plugin-transform-arrow-functions 等都依赖于它来工作。
@babel/parser

解析 @babel/parser 将源码字符串解析为 AST（抽象语法树）

@babel/transform

执行代码转换的工具集，用于将新语法、新特性转换为等效的旧版实现。

常见的 @babel/plugin-transform-* 插件示例

  1. @babel/plugin-transform-arrow-functions 将箭头函数转换为普通函数
  2. @babel/plugin-transform-block-scoping 将 let / const 转换为 var
  3. @babel/plugin-transform-classes 将类语法转换为 ES5 构造函数
  4. @babel/plugin-transform-spread 将数组展开运算符 ... 转换为 concat 或 apply
  5. @babel/plugin-transform-template-literals 转换模板字符串
  6. @babel/plugin-transform-runtime 避免重复引入 helper 函数和 polyfill，减少代码体积

transform.presets（预设插件）

  1. 定义：Preset 是一组预先配置好的插件集合，旨在简化配置过程
  2. 用途：通常用于支持特定版本的 ECMAScript 或者特定框架（如 React、TS）所需的语法转换，JavaScript 语法转换为兼容旧版浏览器的代码
  3. 灵活性：快速配置的方式，灵活性相对较低

transform.plugins（自定义/第三方插件）

  1. 定义：Plugins 是具体执行代码转换工作的模块。每个插件通常专注于单一功能或特性，比如箭头函数转换、类属性转换等
  2. 用途：通过直接指定插件，可以更精确地控制哪些特性需要被转换以及如何转换。这允许你针对项目的具体需求定制转换流程
  3. 灵活性：与 presets 相比，plugins 提供了更高的灵活性和控制力。你可以单独添加、移除或调整任何插件的位置以满足特定要求
@babel/generator

@babel/generator 主要作用：将抽象语法树（AST）重新生成为 JavaScript 代码字符串。 它是 Babel 转换流程的最后一个阶段 —— 代码生成（Code Generation）。

注意：是否保留注释打印，是否压缩代码，是否生成源代码映射，是否函数表达式括号等，在此控制

@babel/cli

@babel/cli 提供 命令行工具（Command Line Interface） ，它允许你直接在终端中使用 Babel 来转换 JavaScript 文件。

@babel/template

@babel/template 主要作用：帮助你快速创建 AST（抽象语法树）节点或代码片段。

@babel/template 的核心功能： 快速生成 AST 节点，你可以写一小段 JavaScript 代码模板字符串，然后通过 template 模块将其转换为一个 AST 片段。这个 AST 可以插入到其他 AST 中，或者用于替换、添加代码结构。

@babel/types

@babel/types 主要作用：创建和操作 AST（抽象语法树）节点。

@babel/types 提供了：

  1. 创建 AST 节点的方法（如变量、函数、表达式等）
  2. 判断 AST 节点类型的方法
  3. 修改或操作 AST 的辅助函数]

esbuild 是什么？

esbuild 是一个用 Go 语言编写的高性能 JavaScript 打包工具和压缩工具。它的主要特点是速度快，支持并行处理和增量构建，适合大型项目或开发服务器。

极快的构建速度

  1. 它通过纯 Go 实现，并且利用了并行化技术，能够以极高的速度解析、打包和压缩 js 和 ts。
  2. 支持增量构建，进一步提升性能。

支持现代语法

  1. 原生支持 TypeScript、JSX、CSS、JSON。
  2. 原生支持 支持 ES6+ 语法。
  3. 原生支持 JSX（适用于 React 等框架）。
  4. 原生支持 CSS 和 JSON 文件。

零配置即可使用

  1. 不像 Webpack 那样需要复杂的配置文件。
  2. 提供简单的 API：命令行接口（CLI）、js API 和 Go API。

轻量级

  • 占用内存少，适合资源受限的环境。

可扩展性强

  • 支持插件系统，可以自定义加载器、解析器等行为。

主要用途

  • 构建生产环境的 JS/CSS 包
  • 开发环境热更新（HMR）
  • 编译 TypeScript / JSX
  • 压缩代码（Minify）
  • 代码分割、tree-shaking、minify
  • 替代 Babel 或 Terser 进行代码转换和压缩
  • 构建 Node.js 项目的发布版本（打包成单个文件）

SWC是什么？

SWC （Secure Web Compiler）是 Rollup 插件，用于替代传统 TypeScript 和 Babel 编译工具，提供一体化代码转换和压缩功能，显著提升构建效率。 ‌

比 Babel 更快的替代方案。它主要用于代码转换（如将 TypeScript 编译为 JavaScript、ES6+ 转 ES5 等），也可以用于打包和压缩。

极快的速度

  • 用 Rust 编写，性能远超 JavaScript 编写的编译工具（如 Babel）。
  • 支持并行处理，充分利用多核 CPU。
  • 支持现代语法
  • 支持最新的 ECMAScript 标准（ES2020+）。
  • 支持 TypeScript 和 JSX（适用于 React）。
  • 支持 Decorators、Top-level await、Async Iteration 等高级特性。

可扩展性强

  1. 提供插件系统，允许开发者自定义 AST 转换逻辑。
  2. 可集成到构建工具中，例如 Next.js、Parcel、Deno、SvelteKit 等。

跨平台支持

  1. 支持 Node.js 和浏览器环境（通过 WebAssembly）。
  2. 可以作为 CLI 工具使用，也可以通过 JS API 或 Rust API 集成进项目。

安全性

  1. 名称 "swc" 来源于 Secure Web Compiler，强调其安全性和稳定性。

主要用途

  1. 替代 Babel 进行代码转换（ES6+ → ES5）
  2. 编译 TypeScript
  3. 压缩 JavaScript（虽然不是主打功能，但有 minify 插件）
  4. 构建工具中的预处理器（如在 Next.js 中默认使用 swc 来处理 TypeScript 和 JSX）

对比 esbuild、swc 和 Babel

SWC 在性能方面表现卓越，单线程上比 Babel 快 20 倍，四核上快 70 倍。

采用编译型的 Rust 语言开发，在编译时将代码直接转化为机器码，执行效率高

JavaScript 是解释型语言，尽管现代引擎使用 JIT 技术提升性能，但本质上运行时开销更大

总结对比表

功能/特性esbuildSWCBabel
开发语言GoRustJavaScript
构建速度⚡⚡⚡ 最快⚡⚡ 很快⚡ 较慢
是否支持打包✅ 是（核心功能）❌ 否❌ 否
TypeScript 支持✅ 原生支持✅ 原生支持✅ 插件支持
JSX 支持✅ 原生支持✅ 原生支持✅ 插件支持
插件生态中等中等⭐⭐⭐ 强大
是否适合开发服务器✅ 非常适合✅ 适合❌ 不适合
是否适合构建生产✅ 是✅ 是✅ 是
是否适合代码转换✅ 基础转换✅ 深度转换✅ 深度转换
社区成熟度中等成长中⭐⭐⭐ 非常成熟

推荐使用场景

场景推荐工具理由
快速打包 & 构建（如 CI、本地服务）esbuild极快的速度，零配置即可完成打包和压缩。
替代 Babel 进行代码转换swc高性能且支持 TypeScript、React，适合现代化项目。
传统项目 / 需要强大插件系统Babel成熟生态，丰富的插件库，适合需要精细控制编译流程的项目。
React + TypeScript 项目swcNext.js 默认使用 swc，性能更好。
构建 Electron 应用esbuild支持打包为单文件，构建速度快。
需要 Polyfill 支持Babel内置 polyfill 支持，适合兼容老旧浏览器。
avatar
文章
阅读
粉丝