老师可以讲一下Bable和抽象语法树吗

Question

老师可以讲一下Bable和抽象语法树吗

Answer 1

杨艺韬 2023-08-12 00:18:54

Babel 的工作方式是将现代 JavaScript 代码转换为旧版本浏览器可以理解的等效代码。例如，你可能会用到 ES6 的箭头函数，但并不是所有浏览器都支持这个特性。Babel 就可以将箭头函数转换为普通函数表达式，使得代码在不支持箭头函数的环境中也能运行。Babel 在工作时会使用一种称为抽象语法树（AST）的结构。AST 是源代码的分层、树形表示，用于表示程序的语法结构，其实就是一个承载很多信息的对象。

当 Babel 处理代码时，它会执行以下三个主要步骤：

• 解析（Parsing）：将源代码转换为 AST。这个过程会读取代码，并识别各种结构（如变量、函数等）。

• 转换（Transformation）：在 AST 上执行一系列转换。这个阶段可以修改、添加、移除树上的节点。

• 生成（Code Generation）：将经过转换的 AST 转回普通的源代码。

下面有个简单案例，可以体验这三个步骤：

安装依赖项：

npm install --save @babel/parser @babel/traverse @babel/generator

然后在Node环境中，运行下面代码：

const parser = require("@babel/parser");
const traverse = require("@babel/traverse").default;
const generate = require("@babel/generator").default;

// 1. 解析（Parsing）: 将源代码转换为 AST
const code = "const x = 1;";
const ast = parser.parse(code);

// 2. 转换（Transformation）: 在 AST 上进行修改
traverse(ast, {
  enter(path) {
    if (path.isIdentifier({ name: "x" })) {
      path.node.name = "y";
    }
  },
});

// 3. 生成（Code Generation）: 将修改后的 AST 转回源代码
const output = generate(ast).code;

console.log(output); // 输出 "const y = 1;"

也可以在AST可视化工具，如AST Explorer的网站https://astexplorer.net/中体验

• 杨艺韬 #1

  如果后续时间允许，我可以出一门手写babel源码相关的课程