{"action":"created","issue":{"url":"https://api.github.com/repos/CodeLittlePrince/blog/issues/19","repository_url":"https://api.github.com/repos/CodeLittlePrince/blog","labels_url":"https://api.github.com/repos/CodeLittlePrince/blog/issues/19/labels{/name}","comments_url":"https://api.github.com/repos/CodeLittlePrince/blog/issues/19/comments","events_url":"https://api.github.com/repos/CodeLittlePrince/blog/issues/19/events","html_url":"https://github.com/CodeLittlePrince/blog/issues/19","id":384220522,"node_id":"MDU6SXNzdWUzODQyMjA1MjI=","number":19,"title":"平庸前端码农之蜕变 — AST","user":{"login":"CodeLittlePrince","id":17001245,"node_id":"MDQ6VXNlcjE3MDAxMjQ1","avatar_url":"https://avatars1.githubusercontent.com/u/17001245?v=4","gravatar_id":"","url":"https://api.github.com/users/CodeLittlePrince","html_url":"https://github.com/CodeLittlePrince","followers_url":"https://api.github.com/users/CodeLittlePrince/followers","following_url":"https://api.github.com/users/CodeLittlePrince/following{/other_user}","gists_url":"https://api.github.com/users/CodeLittlePrince/gists{/gist_id}","starred_url":"https://api.github.com/users/CodeLittlePrince/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/CodeLittlePrince/subscriptions","organizations_url":"https://api.github.com/users/CodeLittlePrince/orgs","repos_url":"https://api.github.com/users/CodeLittlePrince/repos","events_url":"https://api.github.com/users/CodeLittlePrince/events{/privacy}","received_events_url":"https://api.github.com/users/CodeLittlePrince/received_events","type":"User","site_admin":false},"labels":[{"id":1140230295,"node_id":"MDU6TGFiZWwxMTQwMjMwMjk1","url":"https://api.github.com/repos/CodeLittlePrince/blog/labels/%E9%AB%98%E9%98%B6","name":"高阶","color":"75F4AE","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-11-26T08:26:55Z","updated_at":"2018-11-29T16:16:24Z","closed_at":null,"author_association":"OWNER","body":"前言\r\n---\r\n首先，先说明下该文章是译文，原文出自[《AST for JavaScript developers》](https://itnext.io/ast-for-javascript-developers-3e79aeb08343)。很少花时间特地翻译一篇文章，咬文嚼字是件很累的事情，实在是这篇写的太棒了，所以忍不住想和大家一起分享。\r\n\r\nOK，我们直接进入正题。\r\n\r\n为什么要谈AST（抽象语法树）?\r\n---\r\n如果你查看目前任何主流的项目中的`devDependencies`，会发现前些年的不计其数的插件诞生。我们归纳一下有：javascript转译、代码压缩、css预处理器、elint、pretiier，等。有很多js模块我们不会在生产环境用到，但是它们在我们的开发过程中充当着重要的角色。所有的上述工具，不管怎样，都建立在了AST这个巨人的肩膀上。\r\n![image](https://user-images.githubusercontent.com/17001245/49001027-6a8fd680-f196-11e8-9f19-acc0c9f21284.png)\r\n<p align=\"center\">所有的上述工具，不管怎样，都建立在了AST这个巨人的肩膀上</p>\r\n\r\n我们定一个小目标，从解释什么是AST开始，然后到怎么从一般代码开始去构建它。我们将简单地接触在AST处理基础上，一些最流行的使用例子和工具。并且，我计划谈下我的js2flowchart项目，它是一个不错的利用AST的demo。OK，让我们开始吧。\r\n![image](https://user-images.githubusercontent.com/17001245/49001571-fce4aa00-f197-11e8-84cc-9571508f77f4.png)\r\n\r\n什么是AST（抽象语法树）？\r\n>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.\r\n\r\n![image](https://user-images.githubusercontent.com/17001245/49001839-c9564f80-f198-11e8-8367-8cc33c155a99.png)\r\n\r\n估计很多同学会和图中的喵一样，看完这段官方的定义一脸懵逼。OK，我们来看例子：\r\n![image](https://user-images.githubusercontent.com/17001245/49001922-0e7a8180-f199-11e8-9817-9e5d509f4901.png)\r\n\r\n<p align=\"center\">这很简化</p>\r\n\r\n实际上，正真AST每个节点会有更多的信息。但是，这是大体思想。从纯文本中，我们将得到树形结构的数据。每个条目和树中的节点一一对应。\r\n\r\n那怎么从纯文本中得到AST呢？哇哦，我们知道当下的编译器都做了这件事情。那我们就看看一般的编译器怎么做的就可以了。\r\n![image](https://user-images.githubusercontent.com/17001245/49002250-0c64f280-f19a-11e8-8dc2-2e87e4d200fe.png)\r\n\r\n想做一款编译器是个比较消耗发量的事情，但幸运的是，我们无需贯穿编译器的所有知识点，最后将高级语言转译为二进制代码。我们只需要关注词法分析和语法分析。这两步是从代码中生成AST的关键所在。\r\n\r\n第一步，词法分析，也叫做扫描scanner。它读取我们的代码，然后把它们按照预定的规则合并成一个个的标识tokens。同时，它会移除空白符，注释，等。最后，整个代码将被分割进一个tokens列表（或者说一维数组）。\r\n![image](https://user-images.githubusercontent.com/17001245/49002755-66b28300-f19b-11e8-907b-013a565d944b.png)\r\n\r\n当词法分析源代码的时候，它会一个一个字母地读取代码，所以很形象地称之为扫描-scans；当它遇到空格，操作符，或者特殊符号的时候，它会认为一个话已经完成了。\r\n\r\n第二步，语法分析，也解析器。它会将词法分析出来的数组转化成树形的表达形式。同时，验证语法，语法如果有错的话，抛出语法错误。\r\n![image](https://user-images.githubusercontent.com/17001245/49003444-e260ff80-f19c-11e8-997a-38a5a4ebeb7c.png)\r\n\r\n当生成树的时候，解析器会删除一些没必要的标识tokens（比如不完整的括号），因此AST不是100%与源码匹配的，但是已经能让我们知道如何处理了。说个题外话，解析器100%覆盖所有代码结构生成树叫做CST（具体语法树）\r\n\r\n![image](https://user-images.githubusercontent.com/17001245/49004115-89926680-f19e-11e8-95b7-aad5e7fdf83b.png)\r\n\r\n<p align=\"center\">我们最终得到的</p>\r\n\r\n想要学习更多关于编译器的知识？\r\n[the-super-tiny-compiler](https://github.com/jamiebuilds/the-super-tiny-compiler)，一个贼好的项目。大概200来行代码，几乎每行都有注释。\r\n![image](https://user-images.githubusercontent.com/17001245/49004764-fc501180-f19f-11e8-8242-7140fabbf5f2.png)\r\n\r\n想要自己创建门编程语言？\r\n[LangSandbox](https://github.com/ftomassetti/LangSandbox)，一个更好的项目。它演示了如何创造一门编程语言。当然，设计编程语言这样的书市面上也一坨坨。所以，这项目上一个相比更加深入，与[the-super-tiny-compiler](https://github.com/jamiebuilds/the-super-tiny-compiler)的项目将Lisp转为C语言不同，这个项目你可以写一个你自己的语言，并且将它编译成C语言或者机器语言，最后运行它。\r\n\r\n我能直接用三方库来生成AST吗？\r\n当然可以！有一坨坨的三方库可以用。你可以访问[astexplorer](https://astexplorer.net/)，然后挑你喜欢的库。astexplorer是一个很棒的网站，你可以在线玩转AST，而且除了js，还有很多其它语言的AST库。\r\n![image](https://user-images.githubusercontent.com/17001245/49005590-0e32b400-f1a2-11e8-8d94-a501140a187f.png)\r\n\r\n我不得不强调一款我觉得很棒的三方库，叫做babylon。\r\n![image](https://user-images.githubusercontent.com/17001245/49005704-5225b900-f1a2-11e8-8083-3c73464d5a78.png)\r\n\r\n它被用在大名鼎鼎的babel中，也许这也是它之所以这么火的原因。因为有babel项目的支持，我们可以意料到它将与时俱进，一直支持最新的JS特性，因此可以放心大胆地用，不怕以后JS又出新版导致代码的大规模重构。另外，它的API也非常的简单，容易使用。\r\n\r\nOk，现在你知道怎么将代码生成AST了，让我们继续，来看看现实中的用例。\r\n\r\n第一个用例，我想谈谈代码转化，没错，就是那个货，babel。\r\n>Babel is not a ‘tool for having ES6 support’. Well, it is, but it is far not only what it is about.\r\n\r\n经常把beble和支持es6/7/8联系起来，实际上，这也是我们经常用它的原因。但是，它仅仅是一组插件中的一个。我们也可以使用它来压缩代码，react相关语法转译（如jsx），flow插件等。\r\n![image](https://user-images.githubusercontent.com/17001245/49010480-4fc95c00-f1ae-11e8-8aa6-097d16c1c2db.png)\r\n\r\nbabel是一个javascript编译器。宏观来说，它分3个阶段运行代码：解析（parsing），转译（transforming），生成（generation）。我们可以给babel 一些javascript代码，它修改代码然后生成新的代码返回。那它是怎样修改代码的呢？没错！它创建了AST，遍历树，修改tokens，最后从AST中生成新的代码。\r\n\r\n我们来从下面的demo中看下这个过程：\r\n![image](https://user-images.githubusercontent.com/17001245/49010863-7936b780-f1af-11e8-88f8-1ab083f3eafe.png)\r\n\r\n像我之前提到的，babel使用babylon，所以，首先，我们解析代码成AST，然后遍历AST，再反转所有的变量名，最后生成代码。完成！正如我们看到的，第一步（解析）和第三步（生成）看起来很常规，我们每次都会做这两步。所以，babel接管处理了它俩。最后，我们最为关心的，那就是AST转译这一步了。\r\n\r\n当我们开发babel-plugin的时候，我们只需要描述转化你AST的节点“visitors”就可以了。\r\n![image](https://user-images.githubusercontent.com/17001245/49011369-25c56900-f1b1-11e8-8ce8-69c5218ad0d1.png)\r\n\r\n<p align=\"center\">将它加入你的babel插件列表中，设置你webpack的babel-loader配置或者.babelrc中的plugins即可</p>\r\n\r\nYou may check out Babel-handbook if you would like to learn more about how to build your first babel-plugin.\r\n如果你想要学习怎么创建你的第一个babel-plugin，可以查看[Babel-handbook](https://github.com/jamiebuilds/babel-handbook)\r\n![image](https://user-images.githubusercontent.com/17001245/49011621-daf82100-f1b1-11e8-93d1-8da5567c8279.png)\r\n\r\n让我们继续，下一个用例，我想提到的是自动代码重构工具，以及神器JSCodeshift。\r\n\r\n比如说你想要替换掉所有的老掉牙的匿名函数，把他们变成Lambda表达式（箭头函数）。\r\n![image](https://user-images.githubusercontent.com/17001245/49011944-daac5580-f1b2-11e8-89b4-edff1b2f7a1e.png)\r\n\r\n你的代码编辑器很可能没法这么做，因为这并不是简单地查找替换操作。这时候jscodeshift就登场了。\r\n\r\n如果你听过`jscodeshift`，你很可能也听过`codemods`，一开始挺这两个词可能很困惑，不过没关系，接下来就解释。jscodeshift是一个跑`codemods`的工具。`codemod`是一段描述AST要转化成什么样的代码，这思想和babel的插件如出一辙。\r\n![image](https://user-images.githubusercontent.com/17001245/49012281-e8aea600-f1b3-11e8-9c30-84b2dd3b5d8b.png)\r\n\r\n所以，如果你想创建自动把你的代码从旧的框架迁移到新的框架，这就是一种很乃思的方式。举个例子，react 16的prop-types重构。\r\n![image](https://user-images.githubusercontent.com/17001245/49012449-6ecaec80-f1b4-11e8-8435-7e4e9776b049.png)\r\n\r\n有很多不同的`codemodes`已经创建了，你可以保存你需要的，以免手动的修改一坨坨代码，拿去挥霍吧：\r\n[https://github.com/facebook/jscodeshift](https://github.com/facebook/jscodeshift)\r\n[https://github.com/reactjs/react-codemod](https://github.com/reactjs/react-codemod)\r\n![image](https://user-images.githubusercontent.com/17001245/49012604-dc771880-f1b4-11e8-855a-1bbb56a676b2.png)\r\n\r\n最后一个用例，我想要提到Prettier，因为可能每个码农都在日常工作中用到它。\r\n![image](https://user-images.githubusercontent.com/17001245/49012781-6f17b780-f1b5-11e8-832c-a6fb001c7cea.png)\r\n\r\nPrettier 格式化我们的代码。它调整长句，整理空格，括号等。所以它将代码作为输入，修改后的代码作为输出。听起来很熟悉是吗？当然！\r\n![image](https://user-images.githubusercontent.com/17001245/49012911-eb11ff80-f1b5-11e8-9787-e89074659389.png)\r\n\r\n思路还是一样。首先，将代码生成AST。之后依然是处理AST，最后生成代码。但是，中间过程其实并不像它看起来那么简单。\r\n\r\n同样，如果你想学习更多在美化打印背后理论，这里有一本你可以深入的书  [《A prettier printer》](http://homepages.inf.ed.ac.uk/wadler/papers/prettier/prettier.pdf)。\r\n![image](https://user-images.githubusercontent.com/17001245/49023266-cfb4ed80-f1d1-11e8-9834-5cb94708ce8c.png)\r\n\r\n文章迎来尾声，我们继续，今天最后一件事，我想提及的就是我的库，叫做`js2flowchart`(4.5 k stars 在 Github)。\r\n![image](https://user-images.githubusercontent.com/17001245/49024698-0f310900-f1d5-11e8-9ecf-cbc478cc1518.png)\r\n\r\n<p align=\"center\">顾名思义，它将js代码转化生成svg流程图</p>\r\n\r\n这是一个很好的例子，因为它向你展现了你，当你拥有AST时，可以做任何你想要做的事。把AST转回成字符串代码并不是必要的，你可以通过它画一个流程图，或者其它你想要的东西。\r\n\r\njs2flowchart使用场景是什么呢？通过流程图，你可以解释你的代码，或者给你代码写文档；通过可视化的解释学习其他人的代码；通过简单的js语法，为每个处理过程简单的描述创建流程图。\r\n\r\n马上用最简单的方式尝试一下吧，去线上编辑看看 [js-code-to-svg-flowchart](https://bogdan-lyashenko.github.io/js-code-to-svg-flowchart/docs/live-editor/index.html)\r\n\r\n你也可以在代码中使用它，或者通过CLI，你只需要指向你想生成SVG的文件就行。而且，还有VS Code插件（链接在项目readme中）\r\n\r\n那么，它还能做什么呢？哇哦，我这里就不废话了，大家有兴趣直接看这个项目的文档吧。\r\n\r\nOK，那它是如何工作的呢？\r\n![image](https://user-images.githubusercontent.com/17001245/49027118-6f767980-f1da-11e8-900b-128be1575e12.png)\r\n\r\n首先，解析代码成AST，然后，我们遍历AST并且生成另一颗树，我称之为工作流树。它删除很多不重要的额tokens，但是将关键块放在一起，如函数、循环、条件等。再之后，我们遍历工作流树并且创建形状树。每个形状树的节点包含可视化类型、位置、在树中的连接等信息。最后一步，我们遍历所有的形状，生成对应的SVG，合并所有的SVG到一个文件中。\r\n\r\n结尾\r\n---\r\n寻找和筛选资料着实辛苦，希望同学们可以多多支持！\r\n"},"comment":{"url":"https://api.github.com/repos/CodeLittlePrince/blog/issues/comments/442893903","html_url":"https://github.com/CodeLittlePrince/blog/issues/19#issuecomment-442893903","issue_url":"https://api.github.com/repos/CodeLittlePrince/blog/issues/19","id":442893903,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0Mjg5MzkwMw==","user":{"login":"guopingxiao","id":11886494,"node_id":"MDQ6VXNlcjExODg2NDk0","avatar_url":"https://avatars3.githubusercontent.com/u/11886494?v=4","gravatar_id":"","url":"https://api.github.com/users/guopingxiao","html_url":"https://github.com/guopingxiao","followers_url":"https://api.github.com/users/guopingxiao/followers","following_url":"https://api.github.com/users/guopingxiao/following{/other_user}","gists_url":"https://api.github.com/users/guopingxiao/gists{/gist_id}","starred_url":"https://api.github.com/users/guopingxiao/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/guopingxiao/subscriptions","organizations_url":"https://api.github.com/users/guopingxiao/orgs","repos_url":"https://api.github.com/users/guopingxiao/repos","events_url":"https://api.github.com/users/guopingxiao/events{/privacy}","received_events_url":"https://api.github.com/users/guopingxiao/received_events","type":"User","site_admin":false},"created_at":"2018-11-29T16:16:24Z","updated_at":"2018-11-29T16:16:24Z","author_association":"NONE","body":"很清晰明了的博文，👍"}}
{"actor":{"display_login":"guopingxiao"}}