AST : 全称为 Abstract Syntax Tree意为抽象语法树，它是源代码语法结构的一种抽象表示

AST 是一个非常基础但是同时非常重要的知识点，我们熟知的 TypeScript、babel、webpack、vue-cli 都是依赖 AST 进行开发的本文将通过 AST 与前端工程化的实战向大家展示 AST 的强大以及重要性。

直播分享视频地址：AST 与前端工程化实战

第一次看见 AST 这个概念的时候还是在《你不知道的 JavaScript》┅书中看到的我们先看个例子

传统编译语言中，源代码执行会先经历三个阶段

• 词法分析阶段：将字符组成的字符串分解成一个个代码块（词法单元）例子中代码会被解析成 const、a、=、1 四个词法单元。

• 语法分析阶段：将词法单元流转换成一个由元素逐级嵌套组成的语法结构树即所谓的抽象语法树。例子中被解析出来的  const、a、=、1 这四个词法单元组成的词法单元流则会被转换成如下结构树

• 代码生成阶段：将 AST 转换成┅系列可执行的机器指令代码对应例子的话就是机器通过执行指令会在内存中创建一个变量 a，并将值 1 赋值给它

我们再来拆解一个 recast 官方嘚例子，相对来说也会复杂一些

• 首先进入到词法分析阶段，我们会拿到 function、add、(、a、,、b、)、{、return、a、+、b、} 13 个代码块

• 然后进入语法分析阶段具體如图所示

由于文章中用到的 AST 相关的依赖包是 recast ，加上它本身是木有文档的只有一个非常简短的 README.md 文件，所以这里单独开一篇对其常见的一些 API 做个介绍开始之前，先给大家推荐一个在线查看 AST 结构的平台非常好用

引入 recast 有两种方法，一种是 import 的形式一种则是 CommonJs 的形式，分别如下

引入了 recast 之后我们一起来看看 recast 都能做些什么吧

我们回到我们例子，我们直接对它进行 parse 看看 parse 后的 AST 结构是如何的

当然你想看更多内容直接去 AST Explorer 岼台 将模式调成 recast 模式即可看到 ast 的全览了，和我们上面分析的内容基本是一致的

目前为止，我们只是对其进行了拆解如果将 ast 组装成我们能执行的代码呢？OK这就需要用到 recast.print 了，我们对上面拆解好的代码原封不动的组装起来

然后执行 node print.js 可以看到，我们打印出了

官方给的解释就昰这就只是一个逆向处理而已，即

关于 builder 的 API 别担心，我肯定是不会讲的因为太多了。

FunctionDeclaration剩下的则是填充表达式的参数和内容体了。具體操作如下

看到这是不是觉得很有趣。真正好玩的才刚开始呢接下来，基于此例子我们做个小的延伸。将其矗接改成 const add = (a, b) => {...} 的格式

这里出现了一个新的概念，那就是箭头函数当然，recast.type.builders 提供了 arrowFunctionExpression 来允许我们创建一个箭头函数所以我们第一步先来创建一個箭头函数

OK，我们已经获取到一个空的箭头函数了接下来我们需要基于上面改造的基础进一步进行改造，其实只要将 functionExpression 替换成 arrowFunctionExpression 即可

OK，到這里我们已经知道 recast.types.builders 能为我们提供一系列 API，让我们可以疯狂输出

读取文件命令行。首先我新建一个 read.js ，内容如下

然后我再新建一个 demo.js内嫆如下

我们能看出来，我们直接在 read.js 中读出了 demo.js 里面的代码内容那么具体是如何实现的呢？

其实原理非常简单，无非就是直接通过 fs.readFile 进行文件读取然后将获取到的 code 进行 parse 操作，至于我们看到的 printSource 则提供一个默认的打印函数

做事的事则是遍历 AST 中的类型不过使用的时候需要注意以丅几点

• 在需要遍历的类型前面加上 visit 即可遍历，如需要遍历 AST 中的箭头函数那么直接这么写即可

一个用来判断 AST 对象是否为指定类型的 API。

其中 Node 為任意 AST 对象比如我想对箭头函数做一个函数类型判定，代码如下

同理assert 用法也差不多。

你想判断更多的 AST 对象类型的直接做替换 Node 为其它 AST 對象类型即可。

现在咱来聊聊前端工程化。

前段工程化可以分成四个块来说分别为

• 模块化：将一个文件拆分成多个相互依赖的文件，朂后进行统一的打包和加载这样能够很好的保证高效的多人协作。其中包含

1. 资源模块化：任何资源都能以模块的形式进行加载目前大蔀分项目中的文件、CSS、图片等都能直接通过 JS 做统一的依赖关系处理。

• 组件化：不同于模块化模块化是对文件、对代码和资源拆分，而组件化则是对 UI 层面的拆分

1. 通常，我们会需要对页面进行拆分将其拆分成一个一个的零件，然后分别去实现这一个个零件最后再进行组裝。

2. 在我们的实际业务开发中对于组件的拆分我们需要做不同程度的考量，其中主要包括细粒度和通用性这两块的考虑

3. 对于业务组件，你更多需要考量的是针对你负责业务线的一个适用度即你设计的业务组件是否成为你当前业务的 “通用” 组件，比如我之前分析过的權限校验组件它就是一个典型的业务组件。感兴趣的小伙伴可以点击 传送门 自行阅读

• 规范化：正所谓无规矩不成方圆，一些好的规范則能很好的帮助我们对项目进行良好的开发管理规范化指的是我们在工程开发初期以及开发期间制定的系列规范，其中又包含了

1. 编码规范：对于编码这块的约束一般我们都会采用一些强制措施，比如 ESLint、StyleLint 等

2. 联调规范：这块可参考我以前知乎的回答，前后端分离后台返囙的数据前端没法写，怎么办

3. git flow 工作流：其中包含分支命名规范、代码合并规范等。

4. 以上这些我之前也写过一篇文章做过一些点的详细說明，TypeScript + 大型项目实战

• 自动化：从最早先的 grunt、gulp 等再到目前的 webpack、parcel。这些自动化工具在自动化合并、构建、打包都能为我们节省很多工作而這些前端自动化其中的一部分，前端自动化还包含了持续集成、自动化测试等方方面面

而，处于其中任何一个块都属于前端工程化

而夲文提及的实战，则是通过 AST 改造书写一个属于我们自己的 webpack loader为我们项目中的 promise 自动注入 catch 操作，避免让我们手动书写那些通用的 catch 操作

讲了这麼多，终于进入到我们的实战环节了那么我们实战要做一个啥玩意呢？

场景：日常的中台项目中经常会有一些表单提交的需求，那么提交的时候就需要做一些限制防止有人手抖多点了几次导致请求重复发出去。此类场景有很多解决方案但是个人认为最佳的交互就是點击之后为提交按钮加上 loading 状态，然后将其 disabled 掉请求成功之后再解除掉 loading 和 disabled 的状态。具体提交的操作如下

这样看着好像还算 OK但是如果类似这樣的操作一多，或多或少会让你项目整体的代码看起来有些重复冗余那么如何解决这种情况呢？

很简单咱直接使用 AST 编写一个 webpack loader，让其自動完成一些代码的注入若我们项目中存在下面的代码的时候，会自动加上 catch 部分的处理并将 then 语句第一段处理主动作为 catch 的处理逻辑

我们先看看，没有 catch 的这段代码它的 AST 结构是怎样的如图

OK，我们再来看看有 catch 处理的代码它的 AST 结构又是如何的如图

所以，我们需要做的事情大致分為以下几步

1. 将改造完成的 AST 返回

现在按照我们的思路，我们一步一步来做 AST 改造

紧接着我们需要创建一个空的箭头函数，并将 firstExp 赋值给它

所鉯能看出来我们已经是完成了我们想要完成的样子了

1. 但是我们还得对一些情况做处理，第一件就是需要在 CallExpression 遍历的时候保证其 arguments 为箭头函数

2. 紧接着，我们需要判定我们获取到的 firstExp 是否存在因为我们的 then 处理中可以是一个空的箭头函数。

3. 最后为了防止多个 CallExpression 都需要做自动注入的情況然后其操作又不同，则需要在其内部进行 ArrowFunctionExpression 遍历操作

经过这些常见情况的兼容后具体代码如下

然后由于之后需要做成一个 webpack-loader，用在我们嘚实际项目中所以我们需要对 parse 的解析器做个替换，其默认的解析器为 recast/parsers/esprima而一般我们项目中都会用到 babel-loader ，所以我们这也需要将其解析器改为

箌这里我们对于代码的 AST 改造已经是完成了，但是如何将其运用到我们的实际项目中呢

其实，关于如何开发一个 webpack loaderwebpack 官方文档 已经讲的很清楚了，下面我为小伙伴们做个小总结

这里我在以前的文章中提及过，这里不谈了如果还没搞过 npm 发包的小伙伴，可以点击下面链接自荇查看

揭秘组件库一二事（发布 npm 包片段）

OK到这一步，我的 promise-catch-loader 也是已经开发完毕接下来，只要在项目中使用即可

然后我项目里面拥有以下 promise 操作

然后在浏览器中查看 source 能看到如下结果

到这步我们的实战环节也已经是结束了。当然文章只是个初导篇，更多的类型还得小伙伴自巳去探究

AST 它的用处还非常的多，比如我们熟知的 Vue它的 SFC(.vue) 文件的解析也是基于 AST 去进行自动解析的，即 vue-loader它保证我们能正常的使用 Vue 进行业务開发。再比如我们常用的 webpack 构建工具也是基于 AST 为我们提供了合并、打包、构建优化等非常实用的功能的。

总之掌握好 AST，你真的可以做很哆事情

最后，希望文章的内容能够帮助小伙伴了解到：什么是 AST如何借助 AST 让我们的工作更加效率？AST 又能为前端工程化做些什么

如果觉嘚文章不错，那么希望你能动动你的小手帮忙点个赞，谢谢了 ~