Sucrase — 快速 TS/JSX 转换工具

专注于极致速度的 JavaScript/TypeScript 转换工具，跳过 AST 生成，比 Babel 快约 20 倍，适用于开发模式下的即时编译场景。

技术简介说明

Sucrase 是一个用 JavaScript 编写的快速代码转换工具，其设计目标非常明确：在保持正确性的前提下，以最快速度完成 TypeScript、JSX、Flow 和 ESM 到 CJS 的代码转换。与 Babel 通过完整 AST 遍历实现转换的方式不同，Sucrase 跳过了 AST 生成阶段，直接在 token 流上执行精确的查找替换操作——这一设计决策使它在纯 JavaScript 实现中达到了最快的转换速度。

Sucrase 的设计哲学是实用主义优先于严格规范遵从（pragmatism over strict spec compliance）。它处理所有"现实代码"，但故意忽略极其不常见的语言边缘情况。这种权衡使 Sucrase 获得了速度优势，但也决定了它不会成为通用编译器的替代品——它是一个专注于特定场景（开发模式快速转译、测试环境即时编译）的精准工具。

Sucrase 被 Sandpack（CodeSandbox 的浏览器内代码运行环境）、Backstage（Spotify 开发者平台）等项目采用，也是 Jest 和 create-react-app 等工具的可选转译后端。在 2025-2026 年，Sucrase 进入了维护模式——功能趋于稳定，发布频率降低，但其独特的速度优势使其在特定场景中仍然不可替代。

基本信息

快速上手

安装

# 安装 Sucrase
npm install --save-dev sucrase
 
# 安装特定集成包（按需选择）
npm install --save-dev @sucrase/webpack-loader    # Webpack
npm install --save-dev @sucrase/jest-plugin        # Jest

基础配置

JavaScript API：

import { transform } from 'sucrase';
 
const result = transform(sourceCode, {
  transforms: ['typescript', 'jsx', 'imports'],
  // 可选配置
  production: true,        // 使用 React 自动运行时
  disableESTransforms: true, // 跳过 ES 语法降级（仅做 TS/JSX 转换）
});
 
console.log(result.code);

CLI：

# 安装 CLI
npm install -g sucrase
 
# 转换单个文件
sucrase src/index.tsx -d dist --transforms typescript,jsx
 
# 转换整个目录
sucrase src -d dist --transforms typescript,imports

最小示例

// 最简使用方式
import { transform } from 'sucrase';
 
const code = `
  interface User { name: string; age: number; }
  const user: User = { name: "Alice", age: 30 };
  const el = <div>Hello, {user.name}!</div>;
`;
 
const result = transform(code, {
  transforms: ['typescript', 'jsx'],
});
 
console.log(result.code);
// 输出：
// const user = { name: "Alice", age: 30 };
// const el = React.createElement("div", null, "Hello, ", user.name, "!");

核心概念与架构

四阶段处理流程

Sucrase 的核心设计是跳过 AST 生成，直接在 token 流上操作：

源代码
   │
   ▼
┌───────────────────────────────────────┐
│ 1. Tokenize（词法分析）               │
│    解析器 fork 自 Babel parser，      │
│    但大幅精简，仅产出 token 流        │
├───────────────────────────────────────┤
│ 2. Token Stream 扫描                  │
│    扫描 token 流收集元数据             │
│    （类型标注位置、JSX 标记等）        │
├───────────────────────────────────────┤
│ 3. 作用域计算                          │
│    轻量级 AST 遍历计算变量作用域       │
│    信息（用于 import 转换等）          │
├───────────────────────────────────────┤
│ 4. Find-and-Replace 变换              │
│    在 token 流上执行精确的             │
│    查找替换操作，直接生成输出          │
└───────────────────────────────────────┘
   │
   ▼
 输出代码

与 Babel 的架构对比

设计哲学

1. 实用主义优先：处理所有现实代码，故意忽略极端边缘情况
2. 速度是第一优先级：所有设计决策优先考虑速度
3. 不做类型检查：仅做语法转换，类型安全交给 TypeScript 编译器
4. 不向后兼容：不计划支持旧浏览器（IE、Node 6 等）
5. 聚焦核心：不扩展为通用编译器，保持工具的精准定位

核心特性

• 极致速度：比 Babel 快约 20 倍（纯 JavaScript 实现中最快）
• TypeScript 支持：剥离类型注解、接口、类型别名（不做类型检查）
• JSX 支持：经典 React.createElement 和 React 17+ 自动运行时
• Flow 支持：剥离 Flow 类型注解
• ESM → CJS 转换：将 ES Module import/export 转换为 CommonJS require/module.exports
• 自动语法现代化：支持 optional chaining、nullish coalescing、class fields 等
• 单文件处理：每个文件独立处理，无跨文件依赖
• 零配置：简单的 transforms 数组配置
• 浏览器端支持：可在浏览器中运行（通过 sucrase npm 包）
• Source Map：支持 source map 生成
• Jest 集成：@sucrase/jest-plugin 加速 Jest 测试转译

生态图

Sucrase 生态系统

┌──────────────────────────────────────────────────────────┐
│                    Sucrase 生态系统                       │
├──────────────────────────────────────────────────────────┤
│                                                          │
│  核心                                                     │
│  └── sucrase        — 核心转换引擎                       │
│                                                          │
│  构建集成                                                  │
│  ├── @sucrase/webpack-loader  — Webpack loader            │
│  ├── @rollup/plugin-sucrase   — Rollup 插件（v5.1.0）     │
│  ├── @sucrase/jest-plugin     — Jest 插件（v3.0.0）       │
│  └── Gulp / Broccoli          — 内置集成                   │
│                                                          │
│  Node.js 运行时                                            │
│  └── ts-node（内置 Sucrase 插件） — Node.js 直接运行 TS   │
│                                                          │
│  实际使用项目                                              │
│  ├── Sandpack（CodeSandbox）— 浏览器内代码转译            │
│  ├── Backstage（Spotify）   — 开发平台构建加速            │
│  ├── LiveCodes              — 在线代码游乐场               │
│  └── Jest 用户              — 测试环境加速                 │
│                                                          │
│  竞争/替代工具                                             │
│  ├── esbuild    — Go 实现，更快但功能更多                 │
│  ├── SWC        — Rust 实现，速度相当但功能更全面         │
│  └── @swc-node/register — Node.js require hook           │
│                                                          │
└──────────────────────────────────────────────────────────┘

适用场景

• 开发模式即时编译：开发服务器中快速转译 TS/JSX，无需等待 Babel
• Jest 测试加速：使用 @sucrase/jest-plugin 替代 babel-jest 加速测试
• 浏览器内转译：Sandpack 等在线代码编辑场景中在浏览器内转译代码
• 快速原型验证：无需配置 Babel 即可转译 TypeScript 和 JSX
• CI/CD 测试阶段：利用速度优势加速测试阶段的编译
• 轻量级 Node.js TS 运行：通过 ts-node + Sucrase 插件直接运行 TypeScript
• create-react-app 替代方案：需要快速 JSX 转译但不需要完整 Babel 生态时

开发与工程化

Webpack 集成

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|tsx|js|jsx)$/,
        use: {
          loader: '@sucrase/webpack-loader',
          options: {
            transforms: ['typescript', 'jsx', 'imports'],
            production: true,
          }
        }
      }
    ]
  }
};

Jest 集成

// jest.config.js
module.exports = {
  transform: {
    '^.+\\.(ts|tsx|js|jsx)$': '@sucrase/jest-plugin',
  },
};

Rollup 集成

// rollup.config.js
import sucrase from '@rollup/plugin-sucrase';
 
export default {
  input: 'src/index.ts',
  output: { file: 'dist/index.js', format: 'cjs' },
  plugins: [
    sucrase({
      transforms: ['typescript', 'jsx'],
    }),
  ],
};

ts-node 集成

// tsconfig.json
{
  "ts-node": {
    "transpileOnly": true,
    "compilerOptions": {
      "module": "commonjs"
    }
  }
}

# 使用 Sucrase 作为 ts-node 的转译器
TS_NODE_TRANSPILE_ONLY=true npx ts-node src/index.ts

性能与安全

性能数据

具体 Benchmark（编译 360k 行代码）

在单线程场景下，Sucrase 甚至比 SWC 和 esbuild 更快，因为它是纯 JS 实现，没有 FFI 跨语言调用的开销。这一优势在 Node.js 环境中尤为明显。

性能优化建议

1. 使用 disableESTransforms: true：如果只需要 TS/JSX 转换而不需要 ES 语法降级，跳过 ES 转换可进一步提速
2. 仅启用需要的 transforms：不需要 imports 转换时不要启用
3. 生产模式：production: true 使用 React 自动运行时，减少运行时开销
4. 避免不必要的 source map：开发模式开启，生产构建关闭

安全注意事项

• 输入验证：Sucrase 的 token 流处理方式意味着它不会进行完整的语义分析，恶意构造的输入可能导致意外输出
• 不检查代码错误：Sucrase 不验证代码正确性——需要外部 linter 和类型检查器
• 第三方依赖：Sucrase 依赖 glob（3.35.1 已替换为 tinyglobby 减少传递依赖）

技术对比

与同类工具的详细对比

何时选择 Sucrase

• 开发模式极致速度：在单线程 Node.js 环境中，Sucrase 是最快的转译选择
• 浏览器内转译：Sandpack 等场景需要在浏览器中转译代码
• Jest 测试加速：@sucrase/jest-plugin 提供比 babel-jest 更快的转译
• 不需要 ES 语法降级：如果只需要 TS/JSX 转换而不需要降级到 ES5

何时考虑替代方案

• 需要丰富的插件生态 → Babel
• 需要打包能力 → esbuild 或 Rolldown
• 需要完整的 ES 语法降级 → Babel 或 SWC
• 需要多线程加速 → SWC
• 新项目 → 考虑 SWC 或 esbuild（Sucrase 维护活跃度降低）

最佳实践

推荐配置

// 开发模式——最大速度
import { transform } from 'sucrase';
 
const result = transform(sourceCode, {
  transforms: ['typescript', 'jsx'],     // 仅需要的转换
  production: false,                       // 开发模式
  disableESTransforms: true,               // 跳过 ES 降级
  filePath: 'src/index.tsx',              // 用于 source map
});

常见陷阱

1. 不做类型检查：Sucrase 仅剥离类型注解——必须独立运行 tsc --noEmit
2. 不支持插件：无法添加自定义转换逻辑——如需自定义插件，选择 Babel 或 SWC
3. ES 降级有限：Sucrase 的 ES 语法降级不如 Babel/SWC 完整，不支持旧浏览器
4. 单文件处理：每个文件独立处理，无法内联跨文件的 TypeScript enum
5. 边缘情况：故意忽略极其不常见的语言边缘情况——极端代码可能编译异常
6. CommonJS 互操作：对 CJS 和旧版模块互操作支持有限

与 Babel 的迁移对比

技术局限与边界

已知限制

• 不做类型检查：仅做语法转换，类型安全交给 TypeScript 编译器
• 不支持插件化：架构不支持外部插件，无法扩展转换逻辑
• ES 降级有限：不支持所有 ES 语法降级，不计划支持旧浏览器
• 单文件处理：每个文件独立处理，无法处理跨文件的 TypeScript enum 内联
• 新特性添加困难：由于架构设计，添加新的 JS/TS 特性支持更加困难
• 维护活跃度下降：2024 年没有发布任何版本，2024-2025 间隔近两年

不适用场景

• 需要编译到旧浏览器（IE、旧 Node.js）→ Babel
• 需要自定义转换逻辑 → Babel 或 SWC 插件
• 需要完整的 ES 语法降级 → Babel 或 SWC
• 需要类型检查 → TypeScript 编译器
• 需要打包能力 → esbuild 或 Rolldown
• 新项目长期投入 → 考虑 SWC 或 esbuild（维护更活跃）

未来计划

• 探索 WebAssembly 编译（可能涉及大量代码重构）
• 可能放弃 CommonJS 支持和旧版模块互操作
• 继续推动生态系统现代化
• 维护模式为主，不积极寻求新功能

学习资源

• 官方网站：https://sucrase.io
• GitHub 仓库：https://github.com/alangpierce/sucrase
• 项目愿景文档：https://github.com/alangpierce/sucrase/blob/main/docs/PROJECT_VISION.md
• 变更日志：https://github.com/alangpierce/sucrase/blob/main/CHANGELOG.md
• npm 包：https://www.npmjs.com/package/sucrase
• InfoQ 介绍：https://www.infoq.com/news/2019/06/sucrase-fast-babel-modern-js/
• Honeybadger 对比文章：https://www.honeybadger.io/blog/babel-vs-sucrase-vs-alternatives/

2026 年现状

最新版本

• v3.35.1（2025 年 11 月 19 日）—— 将 glob 替换为 tinyglobby，减少传递依赖

发展趋势

1. 维护模式：项目仍在维护，但不积极寻求新功能。2024 年没有发布任何版本
2. 被 Rust 工具逐步替代：SWC 和 OXC 等 Rust 工具在速度上已能与 Sucrase 竞争，且功能更全面
3. 特定场景仍不可替代：浏览器内转译（Sandpack）和极致单线程速度的场景中仍有独特价值
4. Ecosyste.ms 标记为"关键包"：表明 Sucrase 在 npm 生态中的重要性

版本历史

社区活跃度

总体评价

Sucrase 是前端编译工具中一个有趣的"精准工具"——它不追求功能全面，而是在特定维度（单线程转译速度）上做到了极致。在 SWC 和 esbuild 等 Rust/Go 工具已经能提供更快速度的今天，Sucrase 的独特价值更多体现在浏览器内转译和零 FFI 开销的单线程场景中。对于新项目，SWC 和 esbuild 通常是更好的选择；但对于已有 Sucrase 集成的项目（特别是 Sandpack 等浏览器内场景），它仍然是一个可靠的选择。维护活跃度的下降是主要隐忧，但工具本身的稳定性意味着"维护模式"并非不可接受。