babel源码分析 - generator

最新推荐文章于 2025-03-24 23:29:51 发布

东都花神

最新推荐文章于 2025-03-24 23:29:51 发布

阅读量863

点赞数

分类专栏： babel js 工程化

本文链接：https://blog.csdn.net/qq_33988065/article/details/117395011

版权

本文详细介绍了Babel如何通过generator方法将抽象语法树（AST）转换回源代码，深入剖析了`babel-generator`模块中的`generate`、`Printer`、`print`等关键步骤，以及`withSource`方法在源码映射中的作用。通过一系列的函数调用，最终实现了从AST到可读代码的生成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇：babel源码分析 - traverse

这是 babel 解析的最后一篇，坚持就是胜利✌️。

在这篇中我会梳理下 babel 是如何需要借助 generator 方法将处理好的 AST 重新转化为代码，从而完成整个流程。

首先还是回到 babel-core 的 run 方法中，当执行 generateCode(config.passes, file) 方法时最终执行的下面的代码:

// babel-generator/src/index.ts

export default function generate(
  ast: t.Node,
  opts?: GeneratorOptions,
  code?: string | {
     [filename: string]: string },
): any {
   
  const gen = new Generator(ast, opts, code);
  // 🌵🌵🌵 执行这里 🌵🌵🌵
  return gen.generate();
}

当调用 generate 时执行的是 Printer 中的 generate。

// Generator
generate() {
   
  // 🌵🌵🌵 执行这里 🌵🌵🌵
  return super.generate(this.ast);
}

// -------------我是快乐的分割线--------------

// Printer
generate(ast) {
   
  // 🌵🌵🌵 执行这里 🌵🌵🌵
  this.print(ast);
  this._maybeAddAuxComment();

  return this._buf.get();
}

然后将 ast 传入到实例上 print 方法中开始生成逻辑。

print(node, parent ?) {
   
  if (!node) return;

  const oldConcise = this.format.concise;
  if (node._compact) {
   
    this.format.concise = true;
  }

  const printMethod = this[node.type];
  if (!printMethod) {
    }

  this._printStack.push(node);

  const oldInAux = this._insideAux;
  this._insideAux = !node.loc;
  this._maybeAddAuxComment(this._insideAux && !oldInAux);

  let needsParens = n.needsParens(node, parent, this._printStack);
  if (
    this.format.retainFunctionParens &&
    node.type === "FunctionExpression" &&
    node.extra &&
    node.extra.parenthesized
  ) {
   
    needsParens = true;
  }
  if (needsParens) this.token("(");

  this._printLeadingComments(node);

  const loc = t.isProgram(node) || t.isFile(node) ?

最低0.47元/天解锁文章