AST的介绍和使用

介绍

AST（Abstract Syntax Tree，抽象语法树）是一种树状的结构，用来表示源代码的语法结构。各种语言里面都有抽象语法树，这是因为我们开发过程中的代码是方便人类阅读和理解的，而对于机器来说有组织的树状结构更容易处理。

AST的应用

ast主要应用场景是对源代码的修改，整个流程大概如下： 1.源代码转换成ast 2.修改ast 3.ast转换成源代码

• 语法检查
• 代码风格
• 代码兼容
• 多语言

AST是如何生成的

1. 词法分析 将代码语句通过拆词器拆分成词法单元。
2. 语法分析 根据词法单元生成语法树。
3. 语义分析
4. 代码生成

使用babel修改ast

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

const convertLetToVarPlugin = function (babel) {
  const { types: t } = babel;
  // types 里面提供了AST的辅助函数，比如判断AST节点类型,创建和删除AST节点等。
  return {
    visitor: {
      VariableDeclaration(path) {
        if (path.node.kind === "let") {
          path.node.kind = "var";
        }
        if(t.isVariableDeclaration()){//判断节点类型
            console.log('this is a variable declaration');
        }
      },
    },
  };
};

const code = `let a = 1; let b = 2;`;

const ast = parser.parse(code, {}); // 生成ast

traverse(ast, convertLetToVarPlugin(babel).visitor); // 遍历修改ast
const newCode = generator(ast, {}, code); // 根据ast生成代码

console.log(newCode.code);
// Output: var a = 1; var b = 2;