AST 抽象语法树

        ast抽象语法树是对象，这个对象就是对源代码的描述,通过JS Parser把代码转化成一个抽象的语法树，这个数定义了代码的结构，通过操纵这课树，我们可以精准的定位到声明语句，赋值语句，运算语句等等，实现对代码的分析，优化，变更等操作。

        在浏览器解析，执行渲染页面的时候，也会使用抽象语法树，以谷歌浏览器：webkit会解析HTML+CSS,而V8引擎就会把js源码通过解析器转化成抽象语法树，在进一步转化为字节码或者直接生成机器码。

es6转换成es5，也是在抽象语法树的层面去操作的

AST 抽象语法树的用途很多。例如：

        一.、代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等等。

                如JSlint、JSHint对代码错误和风格的检查，发现一些潜在的错误；

               IDE的错误提示、格式化、高亮、自动补全等等

        二、代码混淆压缩 UglifyJS等 三、优化代码变更，改变代码结构使达到想要的结构

               代码打包工具webpack、rollup等等

               CommonJS、AMD、CMD、UMD等代码规范之间的转化

               CoffeeScript、TypeScript、JSX等转化为原生JavaScript

常用的JS Parser有

esprima             将源码转成ast

estraverse         遍历抽象语法树，采用的是深度优先方式遍历（先遍历子级）

escodegen        将语法树 转成源码

acorn                检查校验库（webapck也是使用这个库） 

https://astexplorer.net/ 这个网站可以看 代码转后的抽象语法树

 代码实列：

//将源码转成 ast 语法树
const esprima =require('esprima');
//estraverse，遍历抽象语法树
const estraverse =require('estraverse');
//escodegen 将ast语法树 转成源码
const escodegen =require('escodegen');

let sourceCode = "let a = 10";
//转码
let ast = esprima.parseModule(sourceCode);
//遍历
estraverse.traverse(ast,{
    enter(node){
        console.log("进入"+node.type)
        //例如 es6 let 换为 es5 var
        if(node.type === "VariableDeclaration"){
            node.kind = "var"        
        }  
    }
    leave(node){
        console.log("离开"+node.type)    
    }
})
//生成源码
const code = escodegen.generate(ast);
console.log('code',code)

webpack和lint等很多的工具和库的核心都是通过AST抽象语法树这个概念来实现对代码的检查，分析等操作的。

通过了解抽象语法属这个概念,也可以编写类似构建工具和库了。