前端开发中，应用了很多工具，譬如webpack、eslint来晋升研发效率，但咱们并不知道这些工具的实现原理。基于这些工具的外围都是形象语法树，那咱们就从形象语法树开始了解底层原理的新世界吧。

一、形象语法树是什么

顾名思义，首先能够确定的是，这是一颗跟语法相干的树。

先上一盘硬菜，维基百科定义如下：

In computer science, an abstract syntax tree (AST), or just syntax tree, is a tree representation of the abstract syntactic structure of source code written in a programming language.

也就是说，形象语法树，是通过编程语言编写的代码的形象语法结构。

用艰深的话讲，咱们所应用的编程语言是一门对人类敌对的语言，然而对于程序剖析来讲，并不敌对。因而，须要将编程语言转译成对程序剖析敌对的语言。

太干了，来点配菜。

咱们联合编译过程，来阐明形象语法树的作用。

如下图所示，个别的编译过程分为六个过程。

那么在语法分析阶段，就是要将词法分析阶段失去的分词后果整合成一棵语法树。简略举个例子：

代码：

function foo(a) {    let b = a + 3;    return b;}

将这个函数转成形象语法树，其外围局部如下图所示：

blockstatement 块级作用域。

VariableDecalaration 变量申明

VariableDecalarator 变量申明器

Returnstatement 返回语句

在转成语法树之后，就能够对语句进行语法查看或进行批改了。

二、 语法树的利用

后面提到，能够通过对语法树剖析来进行语法查看，有没有很相熟？ 有没有想到咱们日常写代码过程中用到的eslint 插件、括号高亮插件等。 没有错，他们就是通过对ast 形象语法树进行剖析，来达成语法检查和高亮目标。

话不多说，看图。

这是一个ast 在咱们开发流程中的一个利用总结。

编写代码：咱们用 vue的 模板语法去定义一些性能，而这些模板语法最初都要通过对 ast 进行剖析最终转为原生 html 和原生 js。

babel 、webpack 和 ast 的关系：

开发过程中，咱们应用了大量处于提案阶段的 es6 的 语法，譬如装璜器、箭头函数、模板字符串等，而这些语法，实际上浏览器自身并不反对。因而，须要将其转成 浏览器反对的 es5 代码。这个es 降级的过程就是通过 babel 实现的，而 babel 的外围也就是通过对 ast 进行更改，从而实现 es 语法降级。

webpack 作为模块化开发的主力军，在打包阶段，也是通过对语法树进行剖析，最终打包成一个文件上传到服务器下来的。

浏览器执行代码和 ast 的关系：

如图中所示，浏览器执行js 代码的过程和咱们下面所论述的编译的六个阶段是极其统一的。

综上所述，语法树和咱们开发的整个过程都是非亲非故的。

意识到了语法树在开发过程中的重要性。 接下来，咱们通过 babel 的外围库 来简略模仿 es6 转 es5 的过程。

转译过程大抵能够分为三步：

  1. 生成语法树
  2. 语法树遍历，更改
  3. 再次遍历语法树，生成新的代码。

通过库 esprima 生成语法树， 通过库 estraverse 遍历语法树并进行语法更改， 通过库 escodegen 遍历语法树，并生成新的代码。

三、 语法树的生成

语法树生成应用的库是 esprima。

咱们先通过一个简略的es6 例子来阐明。

es6 通过 let 关键字进行变量申明，从而实现块级作用域。那么转成 es 5 的话只能是 ‘var’。即，代码 ”let a = 15; “ 转变为 ”var a = 15;“。

首先，导入所应用的几个库（库的地址在本文开端。）并定义字符串。

const prima = require('esprima');const codegen = require('escodegen');const traverse = require('estraverse');var  code2 = 'let a = 2';

咱们晓得，如果要转成语法树，首先要进行词法剖析，通过调用esprima 下的 tokenize函数（console.log(prima.tokenize(code2))）能够查看其生成的token。也能够通过可视化工具esprima 可视化查看词法剖析后果。

从图中能够看出，esprima 对字符串中的每一个此进行解析，并赋予相应的 type。

在词法解析完结后，再进行语法解析造成 ast 树，能够通过命令行

console.log(prima.parseScript(code2));

查看其 ast 的后果，也能够通过 ast 可视化工具 查看其后果。这里展现通过 ast 可视化工具的后果：

es6 语法树：

es5语法树：

比照这两棵语法树，咱们能够看出，其惟一的区别在于，变量申明下，其 kind 节点的值。 那么，接下来，在遍历语法树的时候，咱们只有对 node 下的 kind 节点进行变更就能够实现语法转变了。

四、语法树的遍历和更改

咱们能够通过 estraverse下的 traverse 函数进行语法树遍历并进行相应更改。

const prima = require('esprima');const codegen = require('escodegen');const traverse = require('estraverse');var  code2 = 'let a = 2';

五、生成 es5 代码

咱们通过 escodegen 下的 generate 函数生成 新的es5 代码：

let code2_es5 = codegen.generate(ast2);console.log(code2_es5);//'var a = 2;'

写到这里，基本上对 ast 的 what、why、how 进行了一个根本的介绍。 但美中不足的是，下面对于语法树的解析只是利用库函数进行的。接下来，给大家介绍一些 ast 相干的小常识，并尝试带大家，读一读这些函数的源代码。

六、AST 小常识

js 解析器有哪些？咱们所应用的工具内核是什么？

罕用的 js 解析器有：

esprima： https://github.com/jquery/esp...

acorn：https://github.com/acornjs/acorn

acorn 的诞生晚于 esprima，期因是 esprima 转换速度太慢。

而 babel 目前所用的解析器 fork 自 acorn。webpack 的外围 parser 也是 acorn。而 eslint 作为一个可配置的代码标准查看工具，能够任意抉择定义解析器来应用。

而不论是那个解析器，他们解析失去的 ast 树都合乎ast 规定：https://github.com/estree/estree

规定起源：

在v8引擎之前，最早js引擎是SpiderMonkey，第一个版本由js作者Brendan Eich设计，后交给Mozilla组织保护。js引擎在执行js文件时，都会先将js代码转换成形象语法树(AST)。有一天，一位Mozilla工程师在FireFox中公开了这个将代码转成AST的解析器Api，也就是Parser_API，起初被人整顿到github我的项目estree，缓缓的成了业界的标准。

七、 相干举荐

从零实现一个繁难编译器：https://github.com/YongzeYao/...

Babel 插件和 ast 转化过程：https://juejin.cn/post/684490...

Babel 介绍：https://juejin.cn/post/684490...