从babel讲到AST
本文转载于: 猿2048 网站➽ https://www.mk2048.com/blog/blog.php?id=hkcjbcbkaa 前言 最近给团队分享了一篇babel原理,然后我把他整理成一篇blog,本篇总字数6059(含代码),速读3分钟,普通阅读5分钟,有兴趣的可以关注一下我的 github博客 babel 我们来看一段代码: [1,2,3].map(n => n + 1); 经过babel之后,这段代码变成了这样: [1, 2, 3].map(function (n) { return n + 1; }); babel的背后 babel的过程:解析——转换——生成。 这边又一个中间的东西,是抽象语法树(AST) AST的解析过程 一个js语句是怎么被解析成AST的呢?这个中间有两个步骤,一个是分词,第二个是语义分析,怎么理解这两个东西呢? 分词 什么叫分词? 比如我们在读一句话的时候,我们也会做分词操作,比如:“今天天气真好”,我们会把他切割成“今天”,“天气”,“真好”。 那换成js的解析器呢,我们看一下下面一个语句 console.log(1); ,js会看成 console , . , log , ( , 1 , ) , ; 。 所以我们可以把js解析器能识别的最小词法单元。 当然这样的分词器我们可以简易实现一下。 //思路分析:传入的是字符串的参数