【前端】AST树详解

AST（Abstract Syntax Tree，抽象语法树）是源代码的抽象语法结构的树状表示，树上的每个节点都表示源代码中的一种结构。这种表示方式不依赖于具体的编程语言细节，而是提供了一种结构化的方式来理解和处理源代码。以下是对AST抽象树的详细解析，并通过Babel转化代码的流程作为案例进行解释。

AST抽象树详解

1. 定义与功能

• 定义：AST是源代码的抽象表示，它将源代码的结构以树状形式展现出来，每个节点代表源代码中的一个语法构造，如变量声明、表达式、语句等。
• 功能：AST在编译器和解释器中起着核心作用，它使得编译器能够更方便地对源代码进行语法分析、语义分析、代码优化和代码生成等操作。

2. 结构与特点

• 结构：AST由节点和边组成，节点代表语法元素（如变量、常量、表达式、语句等），边表示节点之间的关系（如父子关系、兄弟关系等）。
• 特点： - 抽象性：AST不会表示源代码中的每个细节，如空格、注释和格式等，而是只保留对语法分析有用的信息。- 独立性：AST不依赖于具体的编程语言细节，因此可以为多种语言编写统一的编译器或解释器。- 可扩展性：AST的结构可以根据需要进行扩展，以支持更复杂的语法和语义分析。

3. 构建过程

• 词法分析：将源代码的字符序列划分为一系列有意义的词法单元（tokens），如标识符、关键字、运算符等。
• 语法分析：根据语法规则将词法单元序列组合成语法结构，并构建AST。这一过程中会进行语法检查，确保源代码符合语法规则。

Babel转化代码流程案例

Babel是一个广泛使用的JavaScript编译器，它可以将ES6及更高版本的JavaScript代码转换为向后兼容的JavaScript版本（如ES5），以便在旧版浏览器中运行。以下是Babel转化代码的大致流程：

1. 输入源代码

假设有以下ES6源代码：

const sum = (a, b) => a + b;

2. 词法分析

Babel的词法分析器会将源代码分解为一系列词法单元（tokens），例如：

• const：关键字
• sum：标识符
• (、)：括号
• =>：箭头函数符号
• +：运算符
• a、b：参数标识符

3. 语法分析

语法分析器使用语法规则将词法单元序列转换为AST。对于上述代码，AST可能类似于以下结构（简化表示）：

{  
  "type": "Program",  
  "body": [  
    {  
      "type": "VariableDeclaration",  
      "declarations": [  
        {  
          "type": "VariableDeclarator",  
          "id": {  
            "type": "Identifier",  
            "name": "sum"  
          },  
          "init": {  
            "type": "ArrowFunctionExpression",  
            "params": [  
              {  
                "type": "Identifier",  
                "name": "a"  
              },  
              {  
                "type": "Identifier",  
                "name": "b"  
              }  
            ],  
            "body": {  
              "type": "BinaryExpression",  
              "operator": "+",  
              "left": {  
                "type": "Identifier",  
                "name": "a"  
              },  
              "right": {  
                "type": "Identifier",  
                "name": "b"  
              }  
            }  
          }  
        }  
      ],  
      "kind": "const"  
    }  
  ],  
  "sourceType": "module"  
}

1. 转换与输出

Babel的转换过程会遍历AST，并根据配置的插件和预设（presets）对AST进行修改。例如，它可能会将箭头函数转换为普通函数，将

const

声明转换为

var

声明等。最后，Babel会生成转换后的源代码，并将其输出。

对于上述示例，转换后的代码可能类似于：

var sum = function sum(a, b) {  
  return a + b;  
};

注意：实际转换结果可能因Babel的配置和插件而异。

结论

AST是编译器和解释器中的重要概念，它为源代码提供了一种结构化的表示方式。通过构建AST，编译器可以更方便地进行语法分析、语义分析、代码优化和代码生成等操作。Babel作为JavaScript编译器的一个例子，展示了如何使用AST进行代码转换的过程。

• @babel/parser : 将 js 代码 ------->>> AST 抽象语法树；
• @babel/traverse 对 AST 节点进行递归遍历；
• @babel/types 对具体的 AST 节点进行进行修改；
• @babel/generator : AST 抽象语法树 ------->>> 新的 js 代码；

为什么使用 babel ? 主要是比较好用（只对这个比较熟悉😭）。

进入 @babel/parser 官网开头就介绍了它是使用的 Acorn 来解析 js 代码成 AST 语法树（说明确实 Acorn 比较好）。