AST语法树 - 掘金

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

背景

公司一直有内部分享的传统，并且最近总有人会分享一些通过AST语法树实现的小工具，来帮助排查项目中的写法上不严谨的地方。但通过同事的反应，感觉一听到AST就懵懵的，所以决定写一篇关于AST的内容，帮助他们去理解ast是什么？怎么用？那些场景还能用？

AST是什么？

AST其实是Abstract Syntax Tree的缩写，意在抽象语法树。通俗来讲的话，他就是一个代码的翻译官。可以将一种写法翻译成为另一种。因为AST是用一个无限嵌套的对象，来描述原代码所有信息的对象。因此，我们可以通过AST去加工目标原代码。

AST的流程

那AST是通过怎样的流程完成了翻译、加工的呢？其实，这里也是三步走了。首先parse解析了原代码，然后transform进行变化树，也就是加工原代码的AST。最后，generation通过新的AST去生成了要实现的功能。并且返回代码。

AST的应用场景

上面我们提到了AST可以加工原代码，那也就能想象出。只要我们想给原料加点料的话，我们就可以使用它。例如，我们想修改项目中的某个命名的变量，某个条件下的定时器时间长度。又删掉代码中的log信息等等。可谓是场景非常之多。对于前端最常见的要数es6转es5了。

AST内容展示

const parser = require('@babel/parser');
const traverse = require('@babel/traverse');

const visitor = {};

const code = `const YaoShen = "大 帅 哥";`;

const ast = parser.parse(code);

traverse.default(ast, visitor);

收获和总结

通过本文，我们知道了AST的能力是多么强大，能给原代码添砖加瓦。也懂得了它的三个环节是parse、transform和generation。