babel原理_实现一个真正的babel插件（不仅仅是替换字符）及 ast操作原理

首发：https://blog.csdn.net/qdmoment/article/details/103082802

babel作为当前源码编译的重要工具，有着很重要的地位。babel编译的核心流程是，先把代码解析为AST语法树，再遍历AST语法树并执行操作，最后根据规则生成代码。流程不复杂，复杂的是如何操作AST语法树，以及如何编写babel的插件。

网上有很多帖子在讲如何编写babel插件，但是讲的都比较浅显，看过之后并不能真正意义上去编写babel插件。在实际的项目中，我们需要的插件不仅仅是替换字符串或者打印出什么那么简单，接下来本文会实现一个含有表达式生成，节点类型分析，逻辑判断的babel插件。

业务需求：

在代码require('test')之后加上.default，实现module模块和es6中export的兼容。

说明：这个需求场景是我在升级项目的时候遇到的，在升级babel后，项目中require('test')之类的会出现报错，经查得到是模块规范未统一，需要加.default后不报错。由于项目中有太多的地方使用该场景，所以考虑采用增加babel插件的方法解决该bug。

编写插件之前：

先说下关于ast语法树的定义和操作相关

ast语法树是由许多节点（node）组成的，node之间的关系使用path表示，path是一个可操作的大的对象，有很多方法集成在上面。node有许多属性，比如type，start，end等。node可以通过defineType(args)生成，具体的可以参考babel的官方文档，这里不再详细介绍。babel-ast文档

ast遍历时采用的是树的深度优先遍历（深度优先遍历参见我的另一篇文章，树结构）。

babel中常用的库和工具类：

• @babel/parser 将源代码解析成 AST。
• @babel/generator 将AST解码生 js代码。
• @babel/core 包括了整个babel工作流，也就是说在@babel/core里面我们会使用到@babel/parser、transformer[s]、以及@babel/generator。
• @babel/code-frame 用于生成错误信息并且打印出错误原因和错误行数。（其实就是个console工具类）
• @babel/helpers 也是工具类，提供了一些内置的函数实现