认识

前言

AST 抽象语法树可视化工具

esprima 经典的JavaScript抽象语法树解析器

准备

---

1. 安装 esprima、estraverse、escodegen 依赖

   • esprima: 将 源代码转化为 AST 抽象语法树
   • estraverse: 遍历语法树 ，采用了深度优先遍历
   • escodegen: 将 转换后的语法树 重新生成 源码

   yarn add esprima estraverse escodegen -D

语法

---

通过AST改变函数名这一个简单的操作来认识AST

const esprima = require('esprima'); // 将 源代码转化为  AST 抽象语法树
const estraverse = require('estraverse'); // 遍历语法树
const escodegen = require('escodegen'); // 将 转换后的语法树 重新生成 源码

const sourceCode = `function foo() { console.log('哈哈哈')}`;
const ast = esprima.parse(sourceCode);
console.log('抽象语法树', ast);
let indent = 0;
const padding = () => " ".repeat(indent);
estraverse.traverse(ast, {
    enter(node) {
        console.log(`${padding()}${node.type}进入`);
        if (node.type === 'FunctionDeclaration') {
            node.id.name = 'newFoo';
        }
        indent += 2;
    },
    leave(node) {
        indent -= 2;
        console.log(`${padding()}${node.type}离开`);
    },
});

const targetCode = escodegen.generate(ast);
console.log('转换后的源码', targetCode);