{"action":"opened","issue":{"url":"https://api.github.com/repos/TokenYangForever/NewProject/issues/26","repository_url":"https://api.github.com/repos/TokenYangForever/NewProject","labels_url":"https://api.github.com/repos/TokenYangForever/NewProject/issues/26/labels{/name}","comments_url":"https://api.github.com/repos/TokenYangForever/NewProject/issues/26/comments","events_url":"https://api.github.com/repos/TokenYangForever/NewProject/issues/26/events","html_url":"https://github.com/TokenYangForever/NewProject/issues/26","id":301672185,"number":26,"title":"聊一聊babel的工作(实现)原理","user":{"login":"TokenYangForever","id":25222844,"avatar_url":"https://avatars2.githubusercontent.com/u/25222844?v=4","gravatar_id":"","url":"https://api.github.com/users/TokenYangForever","html_url":"https://github.com/TokenYangForever","followers_url":"https://api.github.com/users/TokenYangForever/followers","following_url":"https://api.github.com/users/TokenYangForever/following{/other_user}","gists_url":"https://api.github.com/users/TokenYangForever/gists{/gist_id}","starred_url":"https://api.github.com/users/TokenYangForever/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/TokenYangForever/subscriptions","organizations_url":"https://api.github.com/users/TokenYangForever/orgs","repos_url":"https://api.github.com/users/TokenYangForever/repos","events_url":"https://api.github.com/users/TokenYangForever/events{/privacy}","received_events_url":"https://api.github.com/users/TokenYangForever/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-03-02T07:02:03Z","updated_at":"2018-03-02T07:02:03Z","closed_at":null,"author_association":"OWNER","body":"#### 前言\r\n* 在聊babel原理之前，必须要先要了解AST的概念。AST--就是[抽象语法树](https://en.wikipedia.org/wiki/Abstract_syntax_tree)，babel执行工作的每一步都会操作到它，我以前也写了点关于JavaScript中AST的内容。ps：babel在进行处理时，也会在AST的节点上新增一些属性，比如：`start`，`end`，`loc`这些来表示节点在源码中的位置，这些属性在最后生成代码映射时也会用到。\r\n#### babel处理过程简介\r\n* babel转换代码的过程大概就是三步： 解析(parse)，转换(transform)，生成(generate)；下面来依次介绍下。\r\n* **解析过程**：这个阶段会把接收到的最初源代码**转化成AST抽象语法树**，具体解析过程还可以分为**词法分析(Lexical Analysis)**和**语法分析(Syntactic Analysis)**，总之第一步就是要生成AST。\r\n* **转换过程**：这应该就是babel工作时最重要也是最复杂的过程，首先接收AST并遍历它，再根据一些规则要求，来对AST的节点进行添加、更新、删除等操作，babel的插件也是在这个阶段介入工作的。\r\n* **生成阶段**：最后一个阶段会把改编后的最终AST转换回JS源代码，同时生成源码映射(source maps)。\r\n#### visitor模式"}}
{"actor":{"display_login":"TokenYangForever"}}