前端码农之蜕变 — AST（抽象语法树）

前言

首先，先说明下该文章是译文，原文出自《AST for JavaScript developers》(https://itnext.io/ast-for-javascript-developers-3e79aeb08343)。不多花时间特意翻译一篇文章，咬文嚼字是件很累的事情，实在是这篇写的太棒了，因此忍不住想和你们一块儿分享。

该译文出自个人博客：https://github.com/CodeLittlePrince/blog/issues/19，个人博客会不定时更新各类类型文章，但愿你们支持。

OK，咱们直接进入正题。

为何要谈AST（抽象语法树）?

若是你查看目前任何主流的项目中的 devDependencies，会发现前些年的不可胜数的插件诞生。咱们概括一下有：javascript转译、代码压缩、css预处理器、elint、pretiier，等。有不少js模块咱们不会在生产环境用到，可是它们在咱们的开发过程当中充当着重要的角色。全部的上述工具，无论怎样，都创建在了AST这个巨人的肩膀上。

全部的上述工具，无论怎样，都创建在了AST这个巨人的肩膀上。

咱们定一个小目标，从解释什么是AST开始，而后到怎么从通常代码开始去构建它。咱们将简单地接触在AST处理基础上，一些最流行的使用例子和工具。而且，我计划谈下个人js2flowchart项目，它是一个不错的利用AST的demo。OK，让咱们开始吧。

什么是AST（抽象语法树）？

It is a hierarchical program representation that presents source code structure according to the grammar of a programming language, each AST node corresponds to an item of a source code.

估计不少同窗会和图中的喵同样，看完这段官方的定义一脸懵逼。OK，咱们来看例子：

这很简化。

实际上，正真AST每一个节点会有更多的信息。可是，这是大致思想。从纯文纯中，咱们将获得树形结构的数据。每一个条目和树中的节点一一对应。

那怎么从纯文本中获得AST呢？哇哦，咱们知道当下的编译器都作了这件事前。那咱们就看看通常的编译器怎么作的就能够了。

想作一款编译器是个比较消耗发量的事情，但幸运的是，咱们无需贯穿编译器的全部知识点，最后将高级语言转译为二进制代码。咱们只须要关注词法分析和预发分析。这两步是从代码中生成AST的关键所在。

第一步，词法分析，也叫作扫描scanner。它读取咱们的代码，而后把它们按照预约的规则合并成一个个的标识tokens。同时，它会移除空白符，注释，等。最后，整个代码将被分割进一个tokens列表（或者说一维数组）。

当词法分析源代码的时候，它会一个一个字母地读取代码，因此很形象地称之为扫描-scans；当它遇到空格，操做符，或者特殊符号的时候，它会认为一个话已经完成了。

第二步，语法分析，也解析器。它会将词法分析出来的数组转化成树形的表达形式。同时，验证语法，语法若是有错的话，抛出语法错误。

当生成树的时候，解析器会删除一些不必的标识tokens（好比不完整的括号），所以AST不是100%与源码匹配的，可是已经能让咱们知道如何处理了。说个题外话，解析器100%覆盖全部代码结构生成树叫作CST（具体语法树）

咱们最终获得的。

想要学习更多关于编译器的知识？the-super-tiny-compiler，一个贼好的项目。大概200来行代码，几乎每行都有注释。

想要本身建立门编程语言？LangSandbox，一个更好的项目。它演示了如何创造一门编程语言。固然，设计编程语言这样的书市面上也一坨坨。因此，这项目更加深刻，与the-super-tiny-compiler的项目将Lisp转为C语言不一样，这个项目你能够写一个你本身的语言，而且将它编译成C语言或者机器语言，最后运行它。

我能直接用三方库来生成AST吗？

固然能够！有一坨坨的三方库能够用。你能够访问astexplorer，而后挑你喜欢的库。astexplorer是一个很棒的网站，你能够在线玩转AST，并且除了js，还有不少其它语言的AST库。

我不得不强调一款我以为很棒的三方库，叫作babylon。

它被用在大名鼎鼎的babel中，也许这也是它之因此这么火的缘由。由于有babel项目的支持，咱们能够意料到它将与时俱进，一直支持最新的JS特性，咱们能够放心大胆地用，不怕之后JS又出新版致使代码的大规模重构。另外，它的API也很是的简单，容易使用。

Ok，如今你知道怎么将代码生成AST了，让咱们继续，来看看现实中的用例。

第一个用例，我想谈谈代码转化，没错，就是那个货，babel。

Babel is not a ‘tool for having ES6 support’. Well, it is, but it is far not only what it is about.

常常把beble和支持es6/7/8联系起来，实际上，这也是咱们常常用它的缘由。可是，它仅仅是一组插件中的一个。咱们也可使用它来压缩代码，react相关预发转译（如jsx），flow插件等。

babel是一个javascript编译器。宏观来讲，它分3个阶段运行代码：解析（parsing），转译（transforming），生成（generation）。咱们能够给babel 一些javascript代码，它修改代码而后生成新的代码返回。那它是怎样修改代码的呢？没错！它建立了AST，遍历树，修改tokens，最后从AST中生成新的代码。

咱们来从下面的demo中看下这个过程：

像我以前提到的，babel使用babylon，因此，首先，咱们解析代码成AST，而后遍历AST，再反转全部的变量名，最后生成代码。完成！正如咱们看到的，第一步（解析）和第三步（生成）看起来很是常规，咱们每次都会作这两步。因此，babel接管处理了它俩。最后，咱们最为关心的，那就是AST转译这一步了。

当咱们开发babel-plugin的时候，咱们只须要描述转化你AST的节点“visitors”就能够了。

将它加入你的babel插件列表中，设置你webpack的babel-loader配置或者 .babelrc中的plugins便可。

若是你想要学习怎么建立你的第一个babel-plugin，能够查看Babel-handbook

让咱们继续，下一个用例，我想提到的是自动代码重构工具，以及神器JSCodeshift。

好比说你想要替换掉全部的老掉牙的匿名函数，把他们变成Lambda表达式（箭头函数）。

你的代码编辑器极可能无法这么作，由于这并非简单地查找替换操做。这时候jscodeshift就登场了。

若是你听过 jscodeshift，你极可能也听过 codemods，一开始挺这两个词可能很困惑，不过不要紧，接下来就解释。jscodeshift是一个跑 codemods的工具。 codemod是一段描述AST要转化成什么样的代码，这思想和babel的插件一模一样。

因此，若是你想建立自动把你的代码从旧的框架迁移到新的框架，这就是一种很乃思的方式。举个例子，react 16的prop-types重构。

有不少不一样的 codemodes已经建立了，你能够保存你须要的，以避免手动的修改一坨坨代码，拿去挥霍吧：

https://github.com/facebook/jscodeshift

https://github.com/reactjs/react-codemod

最后一个用例，我想要提到Prettier，由于可能每一个码农都在平常工做中用到它。

Prettier 格式化咱们的代码。它调整长句，整理空格，括号等。因此它将代码做为输入，修改后的代码做为输出。听起来很熟悉是吗？固然！

思路仍是同样。首先，将代码生成AST。以后依然是处理AST，最后生成代码。可是，中间过程其实并不像它看起来那么简单。

一样，若是你想学习更多在美化打印背后理论，这里有一本你能够深刻的书 《A prettier printer》(http://homepages.inf.ed.ac.uk/wadler/papers/prettier/prettier.pdf)。

文章迎来尾声，咱们继续，今天最后一件事，我想说起的就是个人库，叫作 js2flowchart(4.5 k stars 在 Github)。

顾名思义，它将js代码转化生成svg流程图。

这是一个很好的例子，由于它向你展示了你，当你拥有AST时，能够作任何你想要作的事。把AST转回成字符串代码并非必要的，你能够经过它画一个流程图，或者其它你想要的东西。

js2flowchart使用场景是什么呢？经过流程图，你能够解释你的代码，或者给你代码写文档；经过可视化的解释学习其余人的代码；经过简单的js语法，为每一个处理过程简单的描述建立流程图。

立刻用最简单的方式尝试一下吧，去线上编辑看看 js-code-to-svg-flowchart

你也能够在代码中使用它，或者经过CLI，你只须要指向你想生成SVG的文件就行。并且，还有VS Code插件（连接在项目readme中）

那么，它还能作什么呢？哇哦，我这里就不废话了，你们有兴趣直接看这个项目的文档吧。

OK，那它是如何工做的呢？

首先，解析代码成AST，而后，咱们遍历AST而且生成另外一颗树，我称之为工做流树。它删除不少不重要的额tokens，可是将关键块放在一块儿，如函数、循环、条件等。再以后，咱们遍历工做流树而且建立形状树。每一个形状树的节点包含可视化类型、位置、在树中的链接等信息。最后一步，咱们遍历全部的形状，生成对应的SVG，合并全部的SVG到一个文件中。

结尾

寻找和筛选资料着实辛苦，但愿同窗们能够多多支持！

​

英文：Bohdan Liashenko 译文：岁月是把杀猪刀

segmentfault.com/a/1190000017152442