🧩 使用 Babel + MagicString 实现动态重写 export default 的通用方案

一、背景与概念

在 Vue 或 Vite 等编译器工具链中，我们经常需要在不破坏原始脚本语义的前提下 ，对模块的默认导出 (export default) 进行重写，以便：

• 插入运行时代码（如热更新逻辑、注入编译上下文）。
• 提取默认导出的对象供编译器处理。
• 动态包装 export default 以便进一步扩展。

而直接用正则或字符串替换很容易破坏代码结构，尤其在包含注释、模板字符串、多行声明的情况下。因此，更安全的方式是：

✅ 使用 @babel/parser 构建 AST

✅ 用 MagicString 实现精准的源码替换。

本文即通过分析 rewriteDefault() 函数的源码，完整讲解一个健壮的默认导出重写实现。

---

二、整体架构与原理

核心逻辑流程

flowchart TD
  A[parse input via Babel] --> B[traverse AST]
  B --> C{has export default?}
  C -->|No| D[append const as = {}]
  C -->|Yes| E[rewriteDefaultAST]
  E --> F[MagicString overwrite specific nodes]
  F --> G[return rewritten string]

设计思想：

1. 首先用 @babel/parser 解析源代码为 AST；
2. 判断是否存在 export default；
3. 根据导出类型（class / object / re-export）进行不同的替换策略；
4. 使用 MagicString 保留源代码位置与映射信息，安全地覆盖文本。

---

三、核心函数逐段解析

1. rewriteDefault()：入口函数

export function rewriteDefault(
  input: string,
  as: string,
  parserPlugins?: ParserPlugin[],
): string {
  const ast = parse(input, {
    sourceType: 'module',
    plugins: resolveParserPlugins('js', parserPlugins),
  }).program.body
  const s = new MagicString(input)

  rewriteDefaultAST(ast, s, as)

  return s.toString()
}

🔍 逐行注释说明

• parse()：使用 Babel 将输入的 JS/TS 源码转成 AST。
• resolveParserPlugins()：根据文件类型选择合适的 Babel 插件组合（例如支持 TS、装饰器、JSX 等）。
• MagicString(input)：实例化一个可变字符串对象，支持精准字符级操作。
• rewriteDefaultAST()：真正执行默认导出重写逻辑。
• s.toString()：返回重写后的源代码字符串。

👉 总结 ：
rewriteDefault() 是一个纯函数式封装，负责连接 Babel 与 MagicString 的桥梁。

---

2. rewriteDefaultAST()：核心重写逻辑

export function rewriteDefaultAST(
  ast: Statement[],
  s: MagicString,
  as: string,
): void {
  if (!hasDefaultExport(ast)) {
    s.append(`\nconst ${as} = {}`)
    return
  }

  ast.forEach(node => {
    if (node.type === 'ExportDefaultDeclaration') {
      // ...
    } else if (node.type === 'ExportNamedDeclaration') {
      // ...
    }
  })
}

🔍 核心逻辑说明

1. 无默认导出情况

   直接在代码末尾追加一行：

   const <as> = {}

   这保证了调用方总能获得一个具名对象（即使源码没有默认导出）。

2. 存在默认导出时

   遍历所有 AST 节点，处理两类情况：

   • ExportDefaultDeclaration：显式 export default；
   • ExportNamedDeclaration：命名导出中导出 default。

---

3. 处理 export default class

if (node.declaration.type === 'ClassDeclaration' && node.declaration.id) {
  const start = node.declaration.decorators?.length
    ? node.declaration.decorators.at(-1)!.end!
    : node.start!
  s.overwrite(start, node.declaration.id.start!, ` class `)
  s.append(`\nconst ${as} = ${node.declaration.id.name}`)
}

🔍 逻辑说明

• 如果 export default class Foo {}，需要：

  1. 去掉 export default；
  2. 保留 class Foo;
  3. 追加 const as = Foo。

💡 细节：

• 装饰器支持：如果类带有装饰器（@xxx），需从装饰器末尾起覆盖。
• 通过 .overwrite() 精确修改字符串区间。

---

4. 处理 export default {...} 或表达式

s.overwrite(node.start!, node.declaration.start!, `const ${as} = `)

这将把：

export default { a: 1 }

重写为：

const __VUE_DEFAULT__ = { a: 1 }

---

5. 处理 export { default } from 'module'

if (node.source) {
  s.prepend(`import { default as __VUE_DEFAULT__ } from '${node.source.value}'\n`)
  s.remove(specifier.start!, end)
  s.append(`\nconst ${as} = __VUE_DEFAULT__`)
}

🔍 行为说明

对于：

export { default } from './foo'

会被转换为：

import { default as __VUE_DEFAULT__ } from './foo'
const __VUE_DEFAULT__ = __VUE_DEFAULT__

这样做的目的是统一所有"默认导出来源"的写法，方便统一注入逻辑。

---

四、辅助函数解析

hasDefaultExport()

export function hasDefaultExport(ast: Statement[]): boolean {
  for (const stmt of ast) {
    if (stmt.type === 'ExportDefaultDeclaration') return true
    if (
      stmt.type === 'ExportNamedDeclaration' &&
      stmt.specifiers.some(spec => (spec.exported as Identifier).name === 'default')
    ) return true
  }
  return false
}

👉 功能 ：判断当前 AST 是否包含默认导出。

这在多层导出（如 export { default } from ...）的场景中非常关键。

---

specifierEnd()

function specifierEnd(s: MagicString, end: number, nodeEnd: number | null) {
  let hasCommas = false
  let oldEnd = end
  while (end < nodeEnd!) {
    if (/\s/.test(s.slice(end, end + 1))) {
      end++
    } else if (s.slice(end, end + 1) === ',') {
      end++
      hasCommas = true
      break
    } else if (s.slice(end, end + 1) === '}') {
      break
    }
  }
  return hasCommas ? end : oldEnd
}

👉 功能 ：

用于确定 export { default, foo } 中的分隔位置，以正确删除单个 default 导出项而不破坏语法。

---

五、实践与应用场景

✅ Vue SFC 编译阶段

在 @vue/compiler-sfc 中，rewriteDefault() 被用于将 <script> 块的默认导出转换为变量声明，方便在其上注入编译元信息（如 __scopeId、__file 等）。

✅ 构建工具插件

在 Rollup/Vite 插件中，也可用相同逻辑动态重写导出结构，实现自定义运行时行为注入。

---

六、拓展与潜在问题

🧠 拓展方向

• 处理 TypeScript export default interface（当前未支持）。
• 支持顶层 await 或动态导入语句的上下文保持。
• 输出 sourcemap，以便调试与错误追踪。

⚠️ 潜在问题

1. 当代码包含复杂注释或字符串模板时，MagicString 的边界判断需谨慎。
2. 对于多层嵌套 export { default as X } 情况，可能需要二次解析。

---

七、总结

rewriteDefault() 展示了一个高可靠的 AST 操作范式：

语法解析 → 精准修改 → 保持结构完整 → 支持多种导出模式。

这种模式广泛用于现代构建器（如 Vite、Vue、SvelteKit），是源码变换的重要基石。

---

本文部分内容借助 AI 辅助生成，并由作者整理审核。