这次来大概介绍下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 排版