深入分析 JavaScript Babel 的工作原理，包括 Parser, Transformer, Generator 阶段，以及其插件机制和 AST 操作。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷们，大家好！今天咱们就来聊聊 JavaScript 世界里的瑞士军刀 —— Babel。这玩意儿，前端工程师几乎天天见，但真要说清楚它怎么工作的，估计不少人就得抓耳挠腮了。别慌，今儿个我就带着大家深入浅出地扒一扒 Babel 的底裤，看看它到底是如何把 ESNext 语法变成浏览器能看懂的“土话”的。

开场白：Babel 是个啥？

简单来说，Babel 就是个 JavaScript 编译器。但它不是那种把 JavaScript 编译成机器码的编译器，而是个 transpiler，也就是把一种 JavaScript 语法转换成另一种 JavaScript 语法。为啥需要它呢？因为新语法好用啊！ESNext 新特性层出不穷，写起来爽，但是老浏览器不认啊！Babel 的作用就是把这些新语法翻译成老浏览器能理解的 ES5 甚至更老的语法，让你的代码在各种浏览器上都能跑起来。

Babel 的三板斧：Parser, Transformer, Generator

Babel 的工作流程可以分为三个主要阶段，就像一个流水线：

Parser (解析器)：把代码字符串变成抽象语法树 (Abstract Syntax Tree, AST)。
Transformer (转换器)：遍历 AST，根据配置的插件对 AST 进行修改。
Generator (代码生成器)：把修改后的 AST 转换成目标代码字符串。

咱们一个一个来细说。

第一板斧：Parser – 代码变树

Parser 阶段的任务是把 JavaScript 代码字符串解析成一棵 AST。AST 是啥？你可以把它想象成代码的结构化表示，就像一棵树，每个节点代表代码中的一个语法单元，比如变量声明、函数调用、表达式等等。

Babel 默认使用 @babel/parser 这个包来做解析。它基于 Acorn，是一个高性能的 JavaScript 解析器。

举个栗子：

const code = "const a = 1 + 2;";

import * as parser from "@babel/parser";

const ast = parser.parse(code, {
  sourceType: "module", // 指定代码类型，module 或 script
});

console.log(JSON.stringify(ast, null, 2));

运行上面的代码，你会得到一个 JSON 格式的 AST，内容大致如下（简化版）：

{
  "type": "File",
  "program": {
    "type": "Program",
    "body": [
      {
        "type": "VariableDeclaration",
        "declarations": [
          {
            "type": "VariableDeclarator",
            "id": {
              "type": "Identifier",
              "name": "a"
            },
            "init": {
              "type": "BinaryExpression",
              "operator": "+",
              "left": {
                "type": "NumericLiteral",
                "value": 1
              },
              "right": {
                "type": "NumericLiteral",
                "value": 2
              }
            }
          }
        ],
        "kind": "const"
      }
    ],
    "sourceType": "module"
  }
}

可以看到，代码中的 const a = 1 + 2; 被分解成了 VariableDeclaration (变量声明)、VariableDeclarator (变量声明符)、Identifier (标识符)、BinaryExpression (二元表达式) 和 NumericLiteral (数字字面量) 等不同的节点。

第二板斧：Transformer – 树上动刀

Transformer 阶段是 Babel 的核心，它的任务是遍历 AST，并根据配置的插件对 AST 进行修改。 Babel 的强大之处就在于它的插件机制，你可以通过配置不同的插件来实现不同的转换功能，比如把 ES6 的箭头函数转换成 ES5 的 function 表达式，把 JSX 转换成 React.createElement 调用等等。

Babel 使用 @babel/traverse 这个包来遍历 AST。它提供了一系列 API，让你可以在遍历过程中访问和修改 AST 的节点。

举个栗子，假设我们要把代码中的所有变量名 a 改成 b：

import * as parser from "@babel/parser";
import traverse from "@babel/traverse";
import generate from "@babel/generator";

const code = "const a = 1 + a;";

const ast = parser.parse(code, {
  sourceType: "module",
});

traverse(ast, {
  Identifier(path) {
    if (path.node.name === "a") {
      path.node.name = "b";
    }
  },
});

const output = generate(ast).code;

console.log(output); // 输出：const b = 1 + b;

上面的代码中，我们定义了一个 Identifier 的 visitor 函数。traverse 函数会遍历 AST，当遇到 Identifier 类型的节点时，就会调用这个 visitor 函数。在 visitor 函数中，我们判断节点的名字是否为 a，如果是，就把它改成 b。

Visitor 函数

Visitor 函数是 traverse 函数的核心。它可以接受一个 path 对象作为参数。path 对象代表当前遍历到的节点，它包含了很多有用的信息，比如节点的类型、父节点、子节点等等。你还可以通过 path 对象来修改 AST。

常用的 path 对象的方法包括：

path.node: 获取当前节点。
path.parent: 获取父节点。
path.replaceWith(newNode): 用 newNode 替换当前节点。
path.remove(): 删除当前节点。
path.skip(): 跳过当前节点的子节点。
path.stop(): 停止遍历。

Babel 插件

Babel 插件本质上就是一个函数，它接受 Babel 的 API 作为参数，并返回一个 visitor 对象。这个 visitor 对象包含了一系列 visitor 函数，用于处理不同类型的 AST 节点。

一个简单的 Babel 插件的例子：

// my-babel-plugin.js
export default function (babel) {
  const { types: t } = babel;

  return {
    name: "my-babel-plugin", // 可选，插件的名字

    visitor: {
      Identifier(path) {
        if (path.node.name === "a") {
          path.node.name = "b";
        }
      },
    },
  };
}

要使用这个插件，你需要在 Babel 的配置文件中配置它：

// .babelrc.json
{
  "plugins": ["./my-babel-plugin.js"]
}

一些常用的 Babel 插件

插件名称	功能
`@babel/plugin-transform-arrow-functions`	把箭头函数转换成 ES5 的 `function` 表达式。
`@babel/plugin-transform-block-scoping`	把 `let` 和 `const` 转换成 `var`。
`@babel/plugin-transform-classes`	把 ES6 的类转换成 ES5 的构造函数。
`@babel/plugin-transform-destructuring`	把 ES6 的解构赋值转换成 ES5 的代码。
`@babel/plugin-transform-parameters`	把 ES6 的默认参数、剩余参数和扩展运算符转换成 ES5 的代码。
`@babel/plugin-proposal-object-rest-spread`	支持对象剩余属性和扩展运算符。
`@babel/plugin-transform-runtime`	提取 Babel 的辅助函数到 `@babel/runtime` 中，避免重复引入，减小打包体积。
`@babel/plugin-syntax-dynamic-import`	支持动态 `import()` 语法。
`@babel/plugin-transform-react-jsx`	把 JSX 转换成 `React.createElement` 调用。

第三板斧：Generator – 树变代码

Generator 阶段的任务是把修改后的 AST 转换成目标代码字符串。 Babel 使用 @babel/generator 这个包来做代码生成。

import * as parser from "@babel/parser";
import traverse from "@babel/traverse";
import generate from "@babel/generator";

const code = "const a = 1 + a;";

const ast = parser.parse(code, {
  sourceType: "module",
});

traverse(ast, {
  Identifier(path) {
    if (path.node.name === "a") {
      path.node.name = "b";
    }
  },
});

const output = generate(ast, { /* options */ }, code).code;

console.log(output); // 输出：const b = 1 + b;

generate 函数接受三个参数：

ast: 要生成的 AST。
options: 配置选项，比如是否要生成 source map。
code: 原始代码字符串，用于生成 source map。

generate 函数返回一个对象，包含以下属性：

code: 生成的代码字符串。
map: source map 对象。

Babel 的配置文件

Babel 的配置文件通常是 .babelrc.json 或 babel.config.js。你可以在配置文件中指定要使用的插件和预设 (presets)。

Plugins: 用于转换特定语法的插件。
Presets: 插件的集合，比如 @babel/preset-env 包含了所有 ESNext 的转换插件，@babel/preset-react 包含了 React 相关的插件。

一个典型的 .babelrc.json 配置文件：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["> 0.25%", "not dead"]
        }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-transform-runtime"
  ]
}

上面的配置使用了 @babel/preset-env 和 @babel/preset-react 两个预设，以及 @babel/plugin-proposal-object-rest-spread 和 @babel/plugin-transform-runtime 两个插件。

@babel/preset-env 的 targets 选项指定了要兼容的目标浏览器，Babel 会根据这个配置自动选择需要转换的语法。

实战演练：手写一个简单的 Babel 插件

咱们来手写一个简单的 Babel 插件，把代码中的所有 console.log 语句移除掉。

// remove-console-log-plugin.js
export default function (babel) {
  const { types: t } = babel;

  return {
    name: "remove-console-log-plugin",

    visitor: {
      CallExpression(path) {
        if (
          t.isMemberExpression(path.node.callee) &&
          t.isIdentifier(path.node.callee.object, { name: "console" }) &&
          t.isIdentifier(path.node.callee.property, { name: "log" })
        ) {
          path.remove();
        }
      },
    },
  };
}

上面的代码中，我们定义了一个 CallExpression 的 visitor 函数。当遇到 CallExpression 类型的节点时，我们判断它是否是一个 console.log 调用，如果是，就把它移除掉。

然后在 .babelrc.json 中配置这个插件：

{
  "plugins": ["./remove-console-log-plugin.js"]
}

现在，运行 Babel，所有的 console.log 语句都会被移除掉。

AST Explorer：你的 AST 好帮手

如果你想更深入地了解 AST，可以使用 AST Explorer 这个工具。它可以让你在线查看代码的 AST，并实时预览 Babel 转换后的结果。这对于调试 Babel 插件非常有用。

总结

Babel 的工作原理可以概括为以下几点：

使用 Parser 把代码字符串解析成 AST。
使用 Transformer 遍历 AST，并根据配置的插件对 AST 进行修改。
使用 Generator 把修改后的 AST 转换成目标代码字符串。
Babel 的插件机制非常灵活，你可以通过配置不同的插件来实现不同的转换功能。
AST Explorer 是一个非常有用的工具，可以帮助你了解 AST 的结构和调试 Babel 插件。

掌握了 Babel 的工作原理，你就可以更好地理解 JavaScript 的编译过程，并能编写自己的 Babel 插件来扩展 Babel 的功能。希望今天的分享对大家有所帮助，谢谢大家！散会！

发表回复 取消回复

发表回复取消回复