the-super-tiny-，一个贼好的项目。大概200来行代码，几乎每行都有注释。
想要自己创建门编程语言？
，一个更好的项目。它演示了如何创造一门编程语言。当然，设计编程语言这样的书市面上也一坨坨。所以，这项目更加深入，与the-super-tiny-的项目将Lisp转为C语言不同，这个项目你可以写一个你自己的语言，并且将它编译成C语言或者机器语言，最后运行它。
我能直接用三方库来生成AST吗？
当然可以！有一坨坨的三方库可以用。你可以访问，然后挑你喜欢的库。是一个很棒的网站，你可以在线玩转AST，而且除了js，还有很多其它语言的AST库。
我不得不强调一款我觉得很棒的三方库，叫做。
它被用在大名鼎鼎的babel中，也许这也是它之所以这么火的原因。因为有babel项目的支持，我们可以意料到它将与时俱进，一直支持最新的JS特性，我们可以放心大胆地用，不怕以后JS又出新版导致代码的大规模重构。另外，它的API也非常的简单，容易使用。
Ok，现在你知道怎么将代码生成AST了，让我们继续，来看看现实中的用例。
第一个用例，我想谈谈代码转化，没错，就是那个货，babel。
Babel is not a ‘tool for ES6 ’. Well, it is, but it is far not only what it is about.
经常把beble和支持es6/7/8联系起来，实际上，这也是我们经常用它的原因。但是，它仅仅是一组插件中的一个。我们也可以使用它来压缩代码，react相关语法转译（如jsx），flow插件等。
babel是一个编译器。宏观来说，它分3个阶段运行代码：解析（），转译（），生成（）。我们可以给babel 一些代码，它修改代码然后生成新的代码返回。那它是怎样修改代码的呢？没错！它创建了AST，遍历树，修改，最后从AST中生成新的代码。
我们来从下面的demo中看下这个过程：
像我之前提到的，babel使用，所以，首先ast树，我们解析代码成AST，然后遍历AST，再反转所有的变量名，最后生成代码。完成！正如我们看到的，第一步（解析）和第三步（生成）看起来非常常规，我们每次都会做这两步。所以，babel接管处理了它俩。最后，我们最为关心的，那就是AST转译这一步了。
当我们开发babel-的时候，我们只需要描述转化你AST的节点“”就可以了。
将它加入你的babel插件列表中，设置你的babel-配置或者.中的即可
You may check out Babel- if you would like to learn more about how to build your first babel-.
如果你想要学习怎么创建你的第一个babel-，可以查看Babel-
让我们继续，下一个用例，我想提到的是自动代码重构工具，以及神器。
比如说你想要替换掉所有的老掉牙的匿名函数，把他们变成表达式（箭头函数）。
你的代码编辑器很可能没法这么做，因为这并不是简单地查找替换操作。这时候就登场了。
如果你听过，你很可能也听过，一开始挺这两个词可能很困惑，不过没关系，接下来就解释。是一个跑的工具。是一段描述AST要转化成什么样的代码，这思想和babel的插件如出一辙。
所以ast树，如果你想创建自动把你的代码从旧的框架迁移到新的框架，这就是一种很乃思的方式。举个例子，react 16的prop-types重构。
有很多不同的已经创建了，你可以保存你需要的，以免手动的修改一坨坨代码，拿去挥霍吧：
最后一个用例，我想要提到，因为可能每个码农都在日常工作中用到它。
格式化我们的代码。它调整长句，整理空格，括号等。所以它将代码作为输入，修改后的代码作为输出。听起来很熟悉是吗？当然！
思路还是一样。首先，将代码生成AST。之后依然是处理AST，最后生成代码。但是，中间过程其实并不像它看起来那么简单。
同样，如果你想学习更多在美化打印背后理论，这里有一本你可以深入的书《A 》。
文章迎来尾声，我们继续，今天最后一件事，我想提及的就是我的库，叫做(4.5 k stars 在 )。
顾名思义，它将js代码转化生成svg流程图
这是一个很好的例子，因为它向你展现了你，当你拥有AST时，可以做任何你想要做的事。把AST转回成字符串代码并不是必要的，你可以通过它画一个流程图，或者其它你想要的东西。
使用场景是什么呢？通过流程图，你可以解释你的代码，或者给你代码写文档；通过可视化的解释学习其他人的代码；通过简单的js语法，为每个处理过程简单的描述创建流程图。
马上用最简单的方式尝试一下吧，去线上编辑看看js-code-to-svg-
你也可以在代码中使用它，或者通过CLI，你只需要指向你想生成SVG的文件就行。而且，还有VS Code插件（链接在项目中）
那么，它还能做什么呢？哇哦，我这里就不废话了，大家有兴趣直接看这个项目的文档吧。
OK，那它是如何工作的呢？
首先，解析代码成AST，然后，我们遍历AST并且生成另一颗树，我称之为工作流树。它删除很多不重要的额，但是将关键块放在一起，如函数、循环、条件等。再之后，我们遍历工作流树并且创建形状树。每个形状树的节点包含可视化类型、位置、在树中的连接等信息。最后一步，我们遍历所有的形状，生成对应的SVG，合并所有的SVG到一个文件中。
关于本文
译者：@子咻
译文：