java抽象语法树(ast),AST 抽象语法树

AST 抽象语法树简介

AST(Abstract Syntax Tree)是源代码的抽象语法结构树状表现形式，Webpack、ESLint、JSX、TypeScript 的编译和模块化规则之间的转化都是通过 AST 来实现对代码的检查、分析以及编译等操作。

JavaScript 语法的 AST 语法树

JavaScript 中想要使用 AST 进行开发，要知道抽象成语法树之后的结构是什么，里面的字段名称都代表什么含义以及遍历的规则，可以通过 http://esprima.org/demo/parse... 来实现 JavaScript 语法的在线转换。

通过在线编译工具，可以将 function fn(a, b) {} 编译为下面的结构。

{

"type": "Program",

"body": [

{

"type": "FunctionDeclaration",

"id": {

"type": "Identifier",

"name": "fn"

},

"params": [

{

"type": "Identifier",

"name": "a"

},

{

"type": "Identifier",

"name": "b"

}

],

"body": {

"type": "BlockStatement",

"body": []

},

"generator": false,

"expression": false,

"async": false

}

],

"sourceType": "script"

}

将 JavaScript 语法编译成抽象语法树后，需要对它进行遍历、修该并重新编译，遍历树结构的过程为 “先序深度优先”。

esprima、estraverse 和 escodegen

esprima、estraverse 和 escodegen 模块是操作 AST 的三个重要模块，也是实现 babel 的核心依赖，下面是分别介绍三个模块的作用。

1、esprima 将 JS 转换成 AST

esprima 模块的用法如下：

// 文件：esprima-test.js

const esprima = require("esprima");

let code = "function fn() {}";

// 生成语法树

let tree = esprima.parseScript(code);

console.log(tree);

// Script {

// type: 'Program',

// body:

// [ FunctionDeclaration {

// type: 'FunctionDeclarat