构建工具的第三次革命：从 Rollup 到 Rust Bundler，我是如何设计 robuild 的

本文将从第一人称实战视角，深入探讨前端构建工具的技术演进，以及我在设计 robuild 过程中的架构思考与工程实践。

引言：为什么我们需要又一个构建工具？

在开始正文之前，我想先回答一个无法回避的问题：在 Webpack、Rollup、esbuild、Vite 已经如此成熟的今天，为什么还要设计一个新的构建工具？

答案很简单：库构建与应用构建是两个本质不同的问题域。

Webpack 为复杂应用而生，Vite 为开发体验而生，esbuild 为速度而生。但当我们需要构建一个 npm 库时，我们需要的是：

1. 零配置：库作者不应该花时间在配置上
2. 多格式输出：ESM、CJS、甚至 UMD 一键生成
3. 类型声明：TypeScript 项目的 .d.ts 自动生成
4. Tree-shaking 友好：输出代码必须对消费者友好
5. 极致性能：构建速度不应该成为开发瓶颈

robuild 就是为解决这些问题而设计的。它基于 Rolldown（Rust 实现的 Rollup 替代品）和 Oxc（Rust 实现的 JavaScript 工具链），专注于库构建场景。

接下来，让我从构建工具的历史演进说起。

第一章：构建工具的三次演进

1.1 第一次革命：Webpack 时代（2012-2017）

2012 年，Webpack 横空出世，彻底改变了前端工程化的格局。

在 Webpack 之前，前端工程师面对的是一个碎片化的世界：RequireJS 处理模块加载，Grunt/Gulp 处理任务流程，各种工具各司其职却又互不兼容。Webpack 的革命性在于它提出了一个统一的心智模型：一切皆模块。

1// Webpack 的核心思想：统一的依赖图
2// JS、CSS、图片、字体，都是图中的节点
3module.exports = {
4  entry: './src/index.js',
5  module: {
6    rules: [
7      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
8      { test: /\.png$/, use: ['file-loader'] }
9    ]
10  }
11}
12

Webpack 的架构基于以下核心概念：

1. 依赖图（Dependency Graph）：从入口点出发，递归解析所有依赖
2. Loader 机制：将非 JS 资源转换为模块
3. Plugin 系统：基于 Tapable 的事件驱动架构
4. Chunk 分割：智能的代码分割策略

但 Webpack 也有其历史局限性：

• 配置复杂：动辄数百行的配置文件
• 构建速度：随着项目规模增长，构建时间呈指数级增长
• 输出冗余：运行时代码占比较高，不利于库构建

1.2 第二次革命：Rollup 时代（2017-2022）

2017 年左右，Rollup 开始崛起，它代表了一种完全不同的设计哲学：面向 ES Module 的静态分析。

Rollup 的核心创新是 Tree Shaking——通过静态分析 ES Module 的 import/export 语句，只打包实际使用的代码。这在库构建场景下意义重大：

1// input.js
2import { add, multiply } from './math.js'
3console.log(add(2, 3))
4// multiply 未使用
5
6// math.js
7export function add(a, b) { return a + b }
8export function multiply(a, b) { return a * b }
9
10// output.js (Rollup 输出，multiply 被移除)
11function add(a, b) { return a + b }
12console.log(add(2, 3))
13

Rollup 能做到这一点，是因为 ES Module 具有以下静态特性：

1. 静态导入：import 语句必须在模块顶层，不能动态
2. 静态导出：export 的绑定在编译时就能确定
3. 只读绑定：导入的值不能被重新赋值

这使得编译器可以在构建时进行精确的依赖分析，而不需要运行代码。

作用域提升（Scope Hoisting） 是 Rollup 的另一个重要特性。与 Webpack 将每个模块包裹在函数中不同，Rollup 会将所有模块"展平"到同一个作用域：

1// Webpack 风格的输出
2var __webpack_modules__ = {
3  "./src/a.js": (module) => { module.exports = 1 },
4  "./src/b.js": (module, exports, require) => {
5    const a = require("./src/a.js")
6    module.exports = a + 1
7  }
8}
9
10// Rollup 风格的输出
11const a = 1
12const b = a + 1
13

这种输出更紧凑、运行时开销更低，非常适合库构建。

1.3 第三次革命：Rust Bundler 时代（2022-今）

2022 年开始，我们迎来了构建工具的第三次革命：Rust 重写一切。

这场革命的先驱是 esbuild（Go 语言）和 SWC（Rust）。它们用系统级语言重写了 JavaScript 的解析、转换、打包流程，获得了 10-100 倍的性能提升。

为什么 Rust 成为了这场革命的主角？

1. 零成本抽象：高级语言特性不带来运行时开销
2. 内存安全：编译器保证没有数据竞争和悬空指针
3. 真正的并行：无 GC 停顿，能充分利用多核
4. 可编译到 WASM：可以在浏览器和 Node.js 中运行

Rolldown 和 Oxc 是这场革命的最新成果：

Rolldown：Rollup 的 Rust 实现，由 Vue.js 团队主导，目标是成为 Vite 的默认打包器。它保持了 Rollup 的 API 兼容性，同时获得了 Rust 带来的性能优势。

Oxc：一个完整的 JavaScript 工具链，包括解析器、转换器、代码检查器、格式化器、压缩器。它的设计目标是成为 Babel、ESLint、Prettier、Terser 的统一替代品。

1传统工具链                    Oxc 工具链
2Babel (转换)                 oxc-transform
3ESLint (检查)        →       oxc-linter
4Prettier (格式化)            oxc-formatter
5Terser (压缩)                oxc-minify
6

robuild 选择基于 Rolldown + Oxc 构建，正是看中了这两个项目的技术潜力和生态定位。

第二章：理解 Bundler 核心原理

在深入 robuild 的设计之前，我想先从原理层面解释 Bundler 是如何工作的。我会实现一个 Mini Bundler，让你真正理解打包器的核心逻辑。

2.1 从零实现 Mini Bundler

一个最简的 Bundler 需要完成以下步骤：

1. 解析：将源代码转换为 AST
2. 依赖收集：从 AST 中提取 import 语句
3. 依赖图构建：递归处理所有依赖，构建完整的模块图
4. 打包：将所有模块合并为单个文件

下面是完整的实现代码：

1// mini-bundler.js
2// 一个完整的 Mini Bundler 实现，约 300 行代码
3// 支持 ES Module 解析、依赖图构建、打包输出
4
5import * as fs from 'node:fs'
6import * as path from 'node:path'
7import { parse } from '@babel/parser'
8import traverse from '@babel/traverse'
9import { transformFromAstSync } from '@babel/core'
10
11// ============================================
12// 第一部分：模块解析器
13// ============================================
14
15let moduleId = 0  // 模块计数器，用于生成唯一 ID
16
17/**
18 * 解析单个模块
19 * @param {string} filePath - 模块文件的绝对路径
20 * @returns {Object} 模块信息对象
21 */
22function parseModule(filePath) {
23  const content = fs.readFileSync(filePath, 'utf-8')
24
25  // 1. 使用 Babel 解析为 AST
26  // 这里我们支持 TypeScript 和 JSX
27  const ast = parse(content, {
28    sourceType: 'module',
29    plugins: ['typescript', 'jsx']
30  })
31
32  // 2. 收集依赖信息
33  const dependencies = []
34  const imports = []  // 详细的导入信息
35  const exports = []  // 详细的导出信息
36
37  traverse.default(ast, {
38    // 处理 import 声明
39    // import { foo, bar } from './module'
40    // import defaultExport from './module'
41    // import * as namespace from './module'
42    ImportDeclaration({ node }) {
43      const specifier = node.source.value
44      dependencies.push(specifier)
45
46      // 提取导入的具体内容
47      const importedNames = node.specifiers.map(spec => {
48        if (spec.type === 'ImportDefaultSpecifier') {
49          return { type: 'default', local: spec.local.name }
50        }
51        if (spec.type === 'ImportNamespaceSpecifier') {
52          return { type: 'namespace', local: spec.local.name }
53        }
54        // ImportSpecifier
55        return {
56          type: 'named',
57          imported: spec.imported.name,
58          local: spec.local.name
59        }
60      })
61
62      imports.push({
63        specifier,
64        importedNames,
65        start: node.start,
66        end: node.end
67      })
68    },
69
70    // 处理动态 import()
71    // const mod = await import('./module')
72    CallExpression({ node }) {
73      if (node.callee.type === 'Import' &&
74          node.arguments[0]?.type === 'StringLiteral') {
75        dependencies.push(node.arguments[0].value)
76        imports.push({
77          specifier: node.arguments[0].value,
78          isDynamic: true,
79          start: node.start,
80          end: node.end
81        })
82      }
83    },
84
85    // 处理 export 声明
86    // export { foo, bar }
87    // export const x = 1
88    // export default function() {}
89    ExportNamedDeclaration({ node }) {
90      if (node.declaration) {
91        // export const x = 1
92        if (node.declaration.declarations) {
93          for (const decl of node.declaration.declarations) {
94            exports.push({
95              type: 'named',
96              name: decl.id.name,
97              local: decl.id.name
98            })
99          }
100        }
101        // export function foo() {}
102        else if (node.declaration.id) {
103          exports.push({
104            type: 'named',
105            name: node.declaration.id.name,
106            local: node.declaration.id.name
107          })
108        }
109      }
110      // export { foo, bar }
111      for (const spec of node.specifiers || []) {
112        exports.push({
113          type: 'named',
114          name: spec.exported.name,
115          local: spec.local.name
116        })
117      }
118      // export { foo } from './module'
119      if (node.source) {
120        dependencies.push(node.source.value)
121      }
122    },
123
124    ExportDefaultDeclaration({ node }) {
125      exports.push({ type: 'default', name: 'default' })
126    },
127
128    // export * from './module'
129    ExportAllDeclaration({ node }) {
130      dependencies.push(node.source.value)
131      exports.push({
132        type: 'star',
133        from: node.source.value,
134        as: node.exported?.name  // export * as name
135      })
136    }
137  })
138
139  // 3. 转换代码：移除类型注解，转换为 CommonJS
140  // 这样我们可以在运行时执行
141  const { code } = transformFromAstSync(ast, content, {
142    presets: ['@babel/preset-typescript'],
143    plugins: [
144      ['@babel/plugin-transform-modules-commonjs', {
145        strict: true,
146        noInterop: false
147      }]
148    ]
149  })
150
151  return {
152    id: moduleId++,
153    filePath,
154    dependencies,
155    imports,
156    exports,
157    code,
158    ast
159  }
160}
161
162// ============================================
163// 第二部分：模块路径解析
164// ============================================
165
166/**
167 * 解析模块路径
168 * 将 import 语句中的相对路径转换为绝对路径
169 */
170function resolveModule(specifier, fromDir) {
171  // 相对路径
172  if (specifier.startsWith('.') || specifier.startsWith('/')) {
173    let resolved = path.resolve(fromDir, specifier)
174
175    // 尝试添加扩展名
176    const extensions = ['.ts', '.tsx', '.js', '.jsx', '.mjs', '.json']
177
178    // 直接匹配文件
179    for (const ext of extensions) {
180      const withExt = resolved + ext
181      if (fs.existsSync(withExt)) {
182        return withExt
183      }
184    }
185
186    // 尝试 index 文件
187    for (const ext of extensions) {
188      const indexPath = path.join(resolved, `index${ext}`)
189      if (fs.existsSync(indexPath)) {
190        return indexPath
191      }
192    }
193
194    // 如果原路径存在（有扩展名的情况）
195    if (fs.existsSync(resolved)) {
196      return resolved
197    }
198
199    throw new Error(`Cannot resolve module: ${specifier} from ${fromDir}`)
200  }
201
202  // 外部模块（node_modules）
203  // 简化处理，返回原始标识符
204  return specifier
205}
206
207/**
208 * 判断是否为外部模块
209 */
210function isExternalModule(specifier) {
211  return !specifier.startsWith('.') && !specifier.startsWith('/')
212}
213
214// ============================================
215// 第三部分：依赖图构建
216// ============================================
217
218/**
219 * 构建依赖图
220 * 从入口开始，递归解析所有模块
221 * @param {string} entryPath - 入口文件路径
222 * @returns {Array} 模块数组（拓扑排序）
223 */
224function buildDependencyGraph(entryPath) {
225  const absoluteEntry = path.resolve(entryPath)
226  const entryModule = parseModule(absoluteEntry)
227
228  // 广度优先遍历
229  const moduleQueue = [entryModule]
230  const moduleMap = new Map()  // filePath -> module
231  moduleMap.set(absoluteEntry, entryModule)
232
233  for (const module of moduleQueue) {
234    const dirname = path.dirname(module.filePath)
235
236    // 存储依赖映射：相对路径 -> 模块 ID
237    module.mapping = {}
238
239    for (const dep of module.dependencies) {
240      // 跳过外部模块
241      if (isExternalModule(dep)) {
242        module.mapping[dep] = null  // null 表示外部依赖
243        continue
244      }
245
246      // 解析依赖的绝对路径
247      const depPath = resolveModule(dep, dirname)
248
249      // 避免重复解析
250      if (moduleMap.has(depPath)) {
251        module.mapping[dep] = moduleMap.get(depPath).id
252        continue
253      }
254
255      // 解析新的依赖模块
256      const depModule = parseModule(depPath)
257      moduleMap.set(depPath, depModule)
258      moduleQueue.push(depModule)
259      module.mapping[dep] = depModule.id
260    }
261  }
262
263  // 返回模块数组
264  return Array.from(moduleMap.values())
265}
266
267// ============================================
268// 第四部分：代码生成
269// ============================================
270
271/**
272 * 生成打包后的代码
273 * @param {Array} modules - 模块数组
274 * @returns {string} 打包后的代码
275 */
276function generateBundle(modules) {
277  // 生成模块定义
278  let modulesCode = ''
279
280  for (const mod of modules) {
281    // 每个模块包装为 [factory, mapping] 格式
282    // factory 是模块工厂函数
283    // mapping 是依赖映射表
284    modulesCode += `
285    // ${mod.filePath}
286    ${mod.id}: [
287      function(module, exports, require) {
288        ${mod.code}
289      },
290      ${JSON.stringify(mod.mapping)}
291    ],`
292  }
293
294  // 生成运行时代码
295  const runtime = `
296// Mini Bundler 输出
297// 生成时间: ${new Date().toISOString()}
298
299(function(modules) {
300  // 模块缓存
301  const cache = {}
302
303  // 自定义 require 函数
304  function require(id) {
305    // 如果是外部模块（id 为 null），使用原生 require
306    if (id === null) {
307      throw new Error('External module should be loaded via native require')
308    }
309
310    // 检查缓存
311    if (cache[id]) {
312      return cache[id].exports
313    }
314
315    // 获取模块定义
316    const [factory, mapping] = modules[id]
317
318    // 创建模块对象
319    const module = {
320      exports: {}
321    }
322
323    // 缓存模块（处理循环依赖）
324    cache[id] = module
325
326    // 创建本地 require 函数
327    // 将相对路径映射为模块 ID
328    function localRequire(name) {
329      const mappedId = mapping[name]
330
331      // 外部模块
332      if (mappedId === null) {
333        // 在实际环境中，这里应该使用 native require
334        // 为了演示，我们抛出错误
335        if (typeof window === 'undefined') {
336          return require(name)  // Node.js 环境
337        }
338        throw new Error(\`External module not available: \${name}\`)
339      }
340
341      return require(mappedId)
342    }
343
344    // 执行模块工厂函数
345    factory(module, module.exports, localRequire)
346
347    return module.exports
348  }
349
350  // 执行入口模块（ID 为 0）
351  require(0)
352
353})({${modulesCode}
354})
355`
356
357  return runtime
358}
359
360// ============================================
361// 第五部分：主入口
362// ============================================
363
364/**
365 * 打包入口
366 * @param {string} entryPath - 入口文件路径
367 * @param {string} outputPath - 输出文件路径
368 */
369function bundle(entryPath, outputPath) {
370  console.log(`\n📦 Mini Bundler`)
371  console.log(`   Entry: ${entryPath}`)
372  console.log(`   Output: ${outputPath}\n`)
373
374  // 1. 构建依赖图
375  console.log('1. Building dependency graph...')
376  const modules = buildDependencyGraph(entryPath)
377  console.log(`   Found ${modules.length} modules:`)
378  for (const mod of modules) {
379    console.log([`   - [${mod.id}] ${path.relative(process.cwd(), mod.filePath)}`](https://xplanc.org/primers/document/zh/10.Bash/90.%E5%B8%AE%E5%8A%A9%E6%89%8B%E5%86%8C/EX.id.md))
380    console.log([`         Deps: ${mod.dependencies.join(', ') || '(none)'}`](https://xplanc.org/primers/document/zh/10.Bash/90.%E5%B8%AE%E5%8A%A9%E6%89%8B%E5%86%8C/EX.join.md))
381  }
382
383  // 2. 生成打包代码
384  console.log('\n2. Generating bundle...')
385  const bundledCode = generateBundle(modules)
386
387  // 3. 写入文件
388  const outputDir = path.dirname(outputPath)
389  if (!fs.existsSync(outputDir)) {
390    fs.mkdirSync(outputDir, { recursive: true })
391  }
392  fs.writeFileSync(outputPath, bundledCode, 'utf-8')
393
394  // 4. 输出统计
395  const stats = fs.statSync(outputPath)
396  console.log(`\n3. Bundle stats:`)
397  console.log(`   Size: ${(stats.size / 1024).toFixed(2)} KB`)
398  console.log(`   Modules: ${modules.length}`)
399
400  console.log(`\n✅ Bundle created successfully!`)
401  console.log(`   ${outputPath}\n`)
402
403  return { modules, code: bundledCode }
404}
405
406// 导出 API
407export {
408  bundle,
409  parseModule,
410  buildDependencyGraph,
411  generateBundle,
412  resolveModule
413}
414
415// CLI 支持
416if (process.argv[2]) {
417  const entry = process.argv[2]
418  const output = process.argv[3] || './dist/bundle.js'
419  bundle(entry, output)
420}
421

让我们用一个例子测试这个 Mini Bundler：

1// src/index.js - 入口文件
2import { add, multiply } from './math.js'
3import { formatResult } from './utils/format.js'
4
5const result = add(2, 3)
6console.log(formatResult('2 + 3', result))
7console.log(formatResult('2 * 3', multiply(2, 3)))
8

1// src/math.js - 数学工具
2export function add(a, b) {
3  return a + b
4}
5
6export function multiply(a, b) {
7  return a * b
8}
9
10export function subtract(a, b) {
11  return a - b
12}
13

1// src/utils/format.js - 格式化工具
2export function formatResult(expression, result) {
3  return `${expression} = ${result}`
4}
5

运行打包：

1node mini-bundler.js src/index.js dist/bundle.js
2

输出：

1📦 Mini Bundler
2   Entry: src/index.js
3   Output: dist/bundle.js
4
51. Building dependency graph...
6   Found 3 modules:
7   - [0] src/index.js
8         Deps: ./math.js, ./utils/format.js
9   - [1] src/math.js
10         Deps: (none)
11   - [2] src/utils/format.js
12         Deps: (none)
13
142. Generating bundle...
15
163. Bundle stats:
17   Size: 1.84 KB
18   Modules: 3
19
20✅ Bundle created successfully!
21   dist/bundle.js
22