AST

---

什么是ast

    ast又称抽象语法树，以树形结构描述代码，一般是json对象。与ast相关的操作通常有三步：解析、遍历、生成代码

    在前端领域，个人认为最为nb的应用当属尤大实现的模板解析器了，通过对template遍历解析，匹配标签上的字符并转换为对应的vue语法，最终在遍历进行codegen

生成流程

    扫描(scanner)源码

    进行词法分析，生成token流

        可见词法分析其实就是提取关键字的过程，对于分号、换行、注释等是直接忽略的

    对tokens进行语法解析(parser),生成(transform)ast

            可见其将tokens流转换成了具有特殊语义的json描述，这里缺少了关键信息在代码字符的源位置标识，正常来说是应该有这部分信息的

    遍历生成代码

        生成代码的过程是整个ast应用的切入点，允许在该过程对代码进行修改，如babel的插件机制等

---

BABEL

---

工程配置

    npm init -y 初始化package,json

    npm install --save-dev @babel/core @babel/cli @babel/preset-env  

        core是bable提供的用于ast操作的核心模块，如parser、traverse、generator、types等

            parse用于将源代码转换为ast树

            traverse提供了对ast的修改接口

            generate用于生成转换后的代码

            types则提供了一整套节点类型的判断和创建方法

        cli是babel提供的脚手架工具

        preset-env是babel官方预设的配置

    新建babel.config.json配置文件

    scripts增加build指令

    测试

npm run build编译流程

    引入依赖，准备字符串代码

    生成ast

    遍历ast，为函数添加console.log（运行插件）

    生成code

工具与文档

---

代码工具

    recast  exprima  babylon

在线工具

    ast在线分析  tokens在线分析

文档

    js中的ast节点类型  babel中的节点函数  babel文件配置  babel插件手册

---