>[success] # babel ~~~ 1.大部分编译器的工作可以被分解为三个主要阶段：解析（Parsing）， 转化（Transformation）以及 代码生成（Code Generation） 1.1.'解析'将源代码转换为一个更抽象的形式。 1.2.'转换'接受解析产生的抽象形式并且操纵这些抽象形式做任何编译器想让它们做的事。 1.3.'代码生成'基于转换后的代码表现形式（code representation）生成目标代码。 ~~~ >[danger] ##### 解析 ~~~ 1. 词法分析—— tokenizer 通过一个叫做tokenizer（词素生成器，也叫lexer）的工具将源代码 分解成一个个词素。（词素是描述编程语言语法的对象。它可以描述数字，标识符，标点符号， 运算符等等。） 2.语法分析—— parser 接收词素并将它们组合成一个描述了源代码各部分之间关系的中间表达 形式：抽象语法树。（抽象语法树是一个深度嵌套的对象，这个对象以一种既能够简单地操作又 提供很多关于源代码信息的形式，来展现代码。） ~~~ >[danger] ##### 转换 ~~~ 1.编译器的下一个阶段是转换阶段。再回顾一遍，这个过程接收解析生成的抽象语法树并对它做出 改动。转换阶段可以改变抽象语法树使代码保持在同一个语言（例如Babel，Babel接收的是JS代 码生成的也是JS代码），或者编译成另外一门语言。 2.babel 中 traverser函数，这个函数接收抽象语法树以及一个访问者对象 接收创造的抽象语法树并将它和一个访问者对象传给`traverser`函数。然后创造一个新的抽象 语法树 ~~~ >[danger] ##### babel 是如何工作的？ ~~~ 1.babel 是 source to source 的转换，整体编译流程分为三步： 1.1.parse：通过 parser 把源码转成抽象语法树（AST） 1.2.transform：遍历 AST，调用各种 transform 插件对 AST 进行增删改 1.3.generate：把转换后的 AST 打印成目标代码，并生成 sourcemap ~~~ 1. 解析 ——[@babel/parser](https://github.com/babel/babel/tree/master/packages/babel-parser)（包含 上方提到的[tokenizer](https://github.com/babel/babel/tree/master/packages/babel-parser/src/tokenizer)、[parser](https://github.com/babel/babel/tree/master/packages/babel-parser/src/parser)），根据 es2015, es2016… 标准，生成 AST 2. 转换 ——[@babel/traverse](https://github.com/babel/babel/tree/master/packages/babel-traverse)\+ plugins （visitor） 3. 代码生成 ——[@babel/generator](https://github.com/babel/babel/tree/master/packages/babel-generator) * [图片来自](https://mp.weixin.qq.com/s/LlQRx5SPmFgnTDO8VunGnw)  >[info] ## 本大章节参考文章参考来源 [Babel 插件通关秘籍](https://juejin.cn/book/6946117847848321055/section/6946578914764390434) [前端基础建设与架构 30 讲](https://kaiwu.lagou.com/course/courseInfo.htm?courseId=584#/content) [# 抽象语法树 AST 与 编译器 Compiler](http://xaber.co/2019/09/04/%E6%8A%BD%E8%B1%A1%E8%AF%AD%E6%B3%95%E6%A0%91-AST-%E4%B8%8E-%E7%BC%96%E8%AF%91%E5%99%A8-Compiler/) [babel-从入门到上手倪睿 大转转FE](https://mp.weixin.qq.com/s/LlQRx5SPmFgnTDO8VunGnw) [@babel/plugin-transform-runtime](https://blog.windstone.cc/es6/babel/@babel/plugin-transform-runtime.html) https://github.com/browserslist/browserslist#queries