认识

前言

AST 抽象语法树可视化工具

Espree最初是Esprima v1.2.2的一个分支，这是在 ECMAScript 6 开始工作之前发布的最后一个稳定版本的 Esprima。Espree 现在建立在Acorn之上，它具有允许扩展核心功能的模块化架构。Espree 的目标是生成与 Esprima 类似的输出，并使用类似的 API，以便可以使用它来代替 Esprima。

准备

---

1. 安装 espree、estraverse escodegen 依赖

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

   yarn add espree estraverse escodegen -D

语法

---

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

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

const sourceCode = `function foo() { console.log('哈哈哈')}`;
const ast = espree.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);