1. AST简介

AST ( Abstract syntax tree )   是编译原理中的一个概念，即源代码语法结构的一种抽象表示。它以树的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。 例如这样的一段 js 代码，可以表示为下面的结构：

function abs(number) {
    if (number >= 0) return number
    else return -number
}


AST 入门必知必会_编程语言

有了 AST，我们面对的就不再是一坨各种符号混杂空格而成的文本字符串，而是一个严谨规范的树形结构。我们可以通过对 AST 树节点的一系列操作，借助机器高效且精准地修改代码。

AST 相关技术在前端中应用场景非常广泛（babel、eslint、代码格式化、自动补全、混淆压缩、Webpack、Typescript、各种跨端框架等等）。大体可以总结为：代码需要按照一定规律进行批量转换时。我们就可以使用 AST。在代码重构中，AST 同样大有可为，可以这么理解，AST 是一个智能机器人，我们要做的就是编写它的行动指令。只要我们能总结出其中的规律，无论代码量有多少，机器人分分钟就能搞定一切，且不会出现任何差错。

2. Babel简介

前端能够实现 AST 转换的类库有很多，这里引入我们可能最熟悉的一个：Babel，下图描述了 Babel 工作的基本流程

AST 入门必知必会_编程语言_02


其中 parse 与 generate 阶段 babel 都提供了现成的方法，开发者唯一需要关心的是中间的transform (代码转换)过程，核心其实只有两个问题:

  1. 哪些代码是需要修改的？

总结我们需要修改代码的特征，通过 babel.traverse 遍历语法树，配合 visitor 查找到我们需要修改的节点。

  1. 进行怎样的修改？

根据实际需求制定规则，基于节点路径 (path) 进行节点的增删改操作。

下面是一个简单的 demo 演示

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

// 源代码
const code = `function square(n) { return n * n; }`;

// parse 解析源代码生成AST
const ast = parse(code, {/*options*/});

// transform 代码转换 
// 遍历AST节点（深度优先）
traverse(ast, { 
    // 通过visitor访问Identifier(标识符)类型的节点
    Identifier(path) {
        // path表示访问到该节点的一条路径，基于path可以进行各种修改操作
         if (path.node.name == 'n') path.node.name = 'x'
    }
})

// generate AST生成目标代码
const output = generate(ast, {/*options*/}, code);

console.log(output.code) // function square(x) { return x * x; }

3. 学习三步走


  2. 熟悉 js 各种节点类型，语法树结构， ASTExplorer 语法树结构速览
  3. 掌握 babel 相关概念及 api babel 插件开发手册
  4. 实战演练，具体问题具体分析 ，过程中可以参考 babel 插件的实现

4. 小结

AST 是一个无比强大的工具，隐去了词法+语法分析的前置过程，帮助我们深入 js 语言底层，得以更加高效且精准地对代码动刀。熟练掌握 AST 后，你可能会有下面的感觉

AST 入门必知必会_JavaScript_03