# What is Babel?
# babel是什么
Babel是一个用javascript写的编译工具，它能够让你使用下一代JavaScript语法，而不需要去考虑兼容各大浏览器
# 工作原理
- 第一阶段 Parser
将代码转换为AST抽象语法树，用数据结构来表示代码，这样更容易操作
- 第二阶段 Transformer
对AST抽象语法树进行操作，做你想做的
- 第三阶段
将操作完成的AST抽象语法树转换回代码
# 阶段细节
# Parser
# 词法分析
将代码转换为token流
什么是token?
token中文就是标记,相当于不同事物的一个种类名词，比如性别，身高，体重等等,个人理解就是代码中一小段字符组成的有意义的东西就可以叫它token，比如 let表示一个关键字，比如“nihao”，表示一个字符串，这些都是token
在程序中可以分成下面这几种
Keyword：关键字
Identifier:标识符
punctuator:符号
string：字符
Number：数字
# 语法分析
遍历token，形成AST
语法分析过程，读取标识符，然后解析
最终生成下面的AST抽象语法树
上面的数据结构也就是下面这幅图的抽象
# Transformer
# traversal
遍历AST中的节点
通过一个Visitor的概念来遍历我们的AST
- 并且visitor可以控制遍历的状态
- 替换或者移除节点
- 巩固访问逻辑
# Static Analysis
静态语法分析，推断当前的节点代表什么
# Generator
# Bable 的整体工作流程
- 拿着源码进行解析
- 词法分析得到token流
- 语法分析 将token流转换为抽象语法树AST
- 遍历抽象语法树，进行静态分析，推测代码想表达什么，然后进行修改
- 最后将AST再转变回代码
# 总结
在了解了Babel的工作原理之后，我们可以思考一个问题，浏览器的渲染是不是也是大致穿不多的流程呢？将html进行词法语法分析，然后形成AST，再向AST上添加样式，然后再计算位置，最终形成一颗带有样式的AST，然后再渲染到我们的屏幕上，这些所有的一切都是将代码通过数据结构通过抽象的方式表达了出来，然后每一个节点都是可操作的，可遍历的，所以你可以在每个node上做一些神奇的事情