Q6 · 编译器

请详细描述 Babel 原理？

BabelAST编译原理

⚡ 速记答案（30 秒）

Babel = Parse → Transform → Generate
解析（Parser）：源码 → AST
转换（Transform）：插件遍历 AST，进行语法降级、注入辅助函数
生成（Generator）：AST → 新源码，并输出 sourcemap
插件/预设本质是一组 AST 访问器，按需开启即可

📖 详细讲解

Babel 编译流程

源代码 (ES6+)
    ↓ @babel/parser
   AST
    ↓ @babel/traverse + plugins
 转换后的 AST
    ↓ @babel/generator
目标代码 (ES5) + SourceMap

核心包

包	作用
@babel/parser	解析源码为 AST
@babel/traverse	遍历和修改 AST
@babel/types	AST 节点工具函数
@babel/generator	AST 生成代码
@babel/core	整合以上能力

插件机制

每个插件是一个 visitor 对象：

module.exports = () => ({
  visitor: {
    Identifier(path) {
      // 处理标识符节点
    },
  },
});

💻 代码示例

Babel 插件示例：替换 console.log

module.exports = () => ({
  visitor: {
    CallExpression(path) {
      const callee = path.get('callee');
      
      if (
        callee.isMemberExpression() &&
        callee.get('object').isIdentifier({ name: 'console' }) &&
        callee.get('property').isIdentifier({ name: 'log' })
      ) {
        // 替换为空语句（移除 console.log）
        path.remove();
      }
    },
  },
});

💡

面试技巧：回答工程化问题时，结合你实际项目中的配置和优化经验，更有说服力。