这次来大概介绍下babel工作时候的流程，站在大佬的背上，我仍旧是小矮人。
babel是什么
babel是什么呢？babel一个Javascript的编译器，喜欢助人为乐，喜欢别人占自己便宜，最喜欢做的事情就是把浏览器看不懂或者看不太懂的JavaScript语法，转换成浏览器可以看懂的语法。
例如：ES6转化为ES5，或者是在你使用Vue或者React的时候，babel已经在你配置的时候偷偷的进入了框架，成为了你夜夜笙歌时各种新颖Javascript写法后，默默为你收拾烂摊子的那个人（把ES6、7等转化为浏览器可以看懂的ES5）。
babel是怎么工作的
1、解析
接收将你的所有代码（不论是ES5、6、7都可以），然后进行词法解析和语法解析
一、词法解析
此步骤将代码字符串转化为令牌流（类数组对象）
栗子：
a * a
//词法解析后的类数组对象
[
{
type:{...}, value:'a' start: 0, end: 1,},
{
type:{...}, value:'*' start: 2, end: 3,},
{
type:{...}, value:'a' start: 4, end: 5,}, ] 每一个 type 有一组属性来描述该令牌
二、语法解析
语法解析这个步骤很重要，如果必须要描述，那么这个技术"上可屠龙，下可杀猪"，可以当作技术的"焚决"（没有上限）。
好，吹牛了这么久，这个语法解析到底是什么呢？
Javascript在进行语法解析时候，会将里面所有的令牌流，然后形成一个抽象语法树。
抽象语法树：如果JavaScript是一个屏幕。那么抽象语法树就是像素点，能拼成任何形状、颜色、大小的图片、视频。可以通过抽象语法树来对JavaScript的任何类型（对象、函数、字符串……）的数据进行任何（增、删、改、查）操作。没错，他就是JavaScript的上帝之手。
栗子(栗子用了大佬的栗子，具体原文请见最后的补充)：
function add (a,b){
return a+b;
}
//进行抽象语法树的拆解（请问add函数，你成为拆迁户，你感动不感动）
1、一个id，就是它的名字，即add
2、两个params，就是它的参数，即[a, b] 3、一块body，也就是大括号内的一堆东西 add名字不可以再拆了，因为他已经是一个最基础的"Identifier"类型了 由于params和body还可以再拆，所以请在文章最后看大佬的分析吧，个人能力有限，还没有看到这一块的底层内容，sorry 转化
将上面 语法分析 后的抽象语法树进行遍历，然后进行修改和添加一些节点（babel的核心内容），最后输出的仍旧是一个修改后的抽象语法树。
生成
将上面抽象语法树进行深度遍历，然后构建 转换后代码的字符串，然后babel将你的代码优雅降级完成。
补充（手写Babel，详解抽象语法树）
恭喜你，发现了宝藏！！！
今天开始，你就是宝藏男孩？（什么？女的？不，不~，前端圈没有女孩子）。
宝藏连接1：详解babel流程，并且带手写代码：https://www.yuque.com/ericlee/fontend/mvv31t
宝藏连接2：屠龙技——详解抽象语法树，并且带手写代码：https://segmentfault.com/a/1190000016231512
阻碍人类迅速进步的原因是因为——抄袭！推动人类进步的原因是因为——抄袭！
——我啷个知道谁说的，不知道是谁那就是鲁迅
本文使用 mdnice 排版