AST

抽象语法树

    抽象语法树（Abstract Syntax Tree）简称 AST ，是源代码的抽象语法结构的树状表现形式。这个树定义了代码的结构，通过操作这个树，我们可以精准定位到声明语句、赋值语句、运算语句等等，实现对代码的分析、优化、变更等操作。webpack 和 Lint 等很多工具和库的核心都是通过 AST 来实现对代码的检查、分析等操作，了解 AST 我们就能 编写类似的工具。

---

抽象语法树的作用

    1. 代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码的错误提示、代码自动不全等等；    

       比如 lint 对代码错误或者风格的检查；IDE的错误提示、格式化、高亮、自动不全。     

    2. 代码混淆压缩，比如 UglifyJS2等

    3. 优化变更代码，改变代码结构达到自己想要的结构;

        比如 webpack；TS、JSX 转化为原生JS

---

JS 抽象语法树转化工具

    javaScript parser 把 JS 源码转化为抽象语法树的解析器，常用的有 esprima、acorn 等。

    esprima

        通过 esprima 把源码转化为 AST；

        通过 estraverse 遍历并更新 AST；

        通过 escodegen 将 AST 重新生成源码。

        在线查看 AST 结构网站 https://esprima.org/demo/parse.html#

        estraverse 提过给我们两个钩子函数，我们在这一阶段来更新我们的 AST 树。

esprima

输出

    示例 修改变量的值

          我们先去  https://esprima.org/demo/parse.html# 分析结构，找到对应的 type ，然后对其 value 进行修改。

找到对应的 type

修改值

---

babel

    详细文档介绍

    Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。这个转化的过程中就用到了 AST。

    Babel 的三个主要处理步骤分别是： 解析（parse），转换（transform），生成（generate）。

    解析：接收代码并输出 AST， 这个步骤分为两个部分： 词法分析 和  语法分析。

        词法分析阶段 把字符串形式的代码转换为 令牌（tokens） 流；

        语法分析阶段 会把一个令牌流转换成 AST 的形式。 这个阶段会使用令牌中的信息把它们转换成一个 AST 的表述结构，这样更易于后续的操作。

        比如 var a = '1633';

 词法分析

语法分析

    转化：接收 AST 并对其进行遍历，在此过程中对节点进行添加、更新及移除等操作；

    生成：把最终（经过一系列转换之后）的 AST 转换成字符串形式的代码，代码生成其实很简单：深度优先遍历 整个 AST，然后构建可以表示转换后代码的字符串。

---

    babel 使用实例：箭头函数的转化

        我们需要用到两个工具包：babel-core、babel-types；

        我们需要将 ES6 的 箭头函数转换成 普通的函数；

        const sum = (a, b) => a + b =》 const sum = function (a, b){return a + b}

        首先分析两者的 AST 结构

箭头函数AST

普通函数AST

    我们发现 两者有两处区别，知道了 原始结构 和 转换后的结构 ，那么接下来就是开始 转换。

---

  转换之前 我们先了解一些概念。

    path 路径

        Path 是表示两个节点之间连接的对象，就像是 链表 一样， 展示了一个节点在树中的位置以及关于该节点各种信息。

   path 路径

    Visitors 访问者

        在访问到某一个路径的时候进行匹配，然后在对这个节点进行修改，比如说上面的当我们访问到 ArrowFunctionExpression 的时候，在 ArrowFunctionExpression 内部写 逻辑。

   Visitors 访问者

接下来开始转换

    将 ArrowFunctionExpression 替换成 FunctionExpression， 对比 body 中的内容， 生成BlockStatement， 再生成 ReturnStatement，ReturnStatement中的内容 我们可以复用 箭头函数中的 BinaryExpression；

    对于要生成的节点，我们要用到 babel-types， 然后去 npm/babel-types 网站 去找到我们要生成的节点。

查找要生成的节点

代码

---

 babel 使用实例：按需引入

    import { concat，join } from 'lodash'; 转换成

    import concat from 'lodash/concat' ;

    import join  from 'lodash/join '；

    减少打包的 体积大小，相当于 乞丐版的 tree-shaking

1

2

具体实现

如何使用

项目中使用