ast简介

发表于 分类于
本文字数： 1.1k 阅读时长 ≈ 1 分钟

概念

抽象语法树（Abstract Syntax Tree，AST）是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。之所以说语法是“抽象”的，是因为这里的语法并不会表示出真实语法中出现的每个细节。

用途

优化变更代码，改变代码结构达到想要的结构（webpack 等），代码语法、风格的检查（eslint），代码的格式化，代码的高亮，代码错误提示，代码自动补全（IDE）等等。

如何转换

可通过一些优秀的 javascript Parser 解析器，来实现源码转换为语法树，更改语法树，生成新的语法树。

源码->语法树

一般浏览器会把 js 源码通过解析器转化为抽象语法树，再进一步转化为字节码或直接生成机器码。

每一个 js 引擎都会有自己的抽象语法树格式，chrome 的 v8 引擎，firefox 的 SpiderMonkey 引擎等等，业界标准为：AST 对象文档，中文类似讲解

在线解析点这里

常用的 parser 有：esprima，traceur，acorn( webpack 使用)，shift

遍历更新语法树

常用的 parser 为：estraverse

语法树->新的源码

常用的 parser 为：escodegen

使用 esprima, estraverse, escodegen 三板斧可完成源码编译解析，另有包 recast 可完成这一系列操作。

实例

箭头函数转换成普通函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const esprima = require('esprima');
const estraverse = require('estraverse');
const escodegen = require('escodegen');

let code = `var a = b=>{console.log(123);}`;
let tree = esprima.parseScript(code);
estraverse.traverse(tree, {
  leave(node) {
    if (node.type === 'ArrowFunctionExpression') {
      node.type = 'FunctionDeclaration';
    }
  },
});
let r = escodegen.generate(tree);
console.log(r); // var a = function(b){console.log(123);}

babel 插件

待补充 参考

vue template 模板解析 AST

待补充 参考 参考 2