跳到主要内容

@babel/core 架构

@babel/core 是 Babel 编译器的核心模块，它负责处理代码的编译和转换。

下面是 @babel/core 的架构概述：

  • Parser（解析器）
  • 转换器（Transformer）
  • 代码生成器（Generator）
  • 编译器（Compiler）

1. Parser（解析器）：​

解析器负责将源代码解析成抽象语法树（AST），Babel 使用 @babel/parser 模块作为其默认的解析器。解析器会按照语法规则将源代码分解成语法树的节点，这些节点会按照代码的结构和关系进行组织。

const parser = require("@babel/parser");

const code = `const foo = (x) => x * 2;`;

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

2. Transformer（转换器）：​

转换器负责对 AST 进行遍历和转换，根据指定的转换规则对代码进行修改。Babel 提供了一系列的插件，每个插件都包含了一些转换规则，用于实现不同的代码转换功能。转换器会根据配置的插件列表遍历 AST，并根据插件的规则对节点进行修改。

const babel = require("@babel/core");

const code = `const foo = (x) => x * 2;`;

const result = babel.transformSync(code, {
  presets: ["@babel/preset-env"],
});
console.log(result.code);

3. Generator（代码生成器）：​

代码生成器负责将经过转换的 AST 重新生成为代码字符串。Babel 使用 @babel/generator 模块作为其默认的代码生成器。代码生成器会遍历转换后的 AST，并根据节点的类型和内容，生成相应的代码字符串。生成的代码字符串会保留源代码的格式和缩进等信息。

const generator = require("@babel/generator");
const t = require("@babel/types");

const ast = t.expressionStatement(t.stringLiteral("hello world"));

const output = generator.default(ast);
console.log(output.code);

4. Compiler（编译器）：​

编译器是整个 @babel/core 的核心部分，它负责协调解析器、转换器和代码生成器的工作。编译器接收源代码字符串作为输入，然后依次调用解析器解析源码、转换器进行代码转换、代码生成器生成转换后的代码字符串，并最终将生成的代码返回给调用方。

const babel = require("@babel/core");

const code = `const foo = (x) => x * 2;`;

const result = babel.transformSync(code, {
  presets: ["@babel/preset-env"],
});
console.log(result.code);

5. Options（选项）：​

在编译过程中，可以通过配置选项来指定不同的转换规则、插件列表和其他参数。这些选项会影响解析器、转换器和代码生成器的行为，从而实现不同的编译效果。