什么是AST？它在前端有哪些应用场景

AST (Abstract Syntax Tree) 抽象语法树

1. 基本概念

AST是用于表达源码的树形结构。 它有什么作用？ 方便从一种源码转换成另一种源码。(例如：less->css, es6->es5) 代码分析（例如：eslint代码检查）

// 代码
const sum = 1 + 2;

// 转换为AST
{
  "type": "Program",
  "body": [{
    "type": "VariableDeclaration",
    "declarations": [{
      "type": "VariableDeclarator",
      "id": {
        "type": "Identifier",
        "name": "sum"
      },
      "init": {
        "type": "BinaryExpression",
        "operator": "+",
        "left": {
          "type": "Literal",
          "value": 1
        },
        "right": {
          "type": "Literal",
          "value": 2
        }
      }
    }]
  }]
}

2. 应用场景

• 代码转换

  • Babel (ES6 → ES5)
  • TypeScript → JavaScript
  • JSX → JavaScript

• 代码分析

  • ESLint 代码检查
  • Prettier 代码格式化
  • 代码高亮

• 代码优化

  • 压缩混淆
  • Tree-shaking
  • 代码分割

3. 常用工具

// @babel/parser: 解析代码生成AST
import parser from '@babel/parser';
const ast = parser.parse(code);

// @babel/traverse: 遍历和修改AST
import traverse from '@babel/traverse';
traverse(ast, {
  Identifier(path) {
    // 处理标识符
  }
});

// @babel/generator: 生成代码
import generate from '@babel/generator';
const output = generate(ast);

4. 实际应用

• 自动化重构
• 自定义语法转换
• 代码分析工具
• 自动化文档生成