作者:商见曜
来源:恒生LIGHT云社区
作为现代前端项目必备的一种技术,Babel 是一个编译器,用于将前沿的 JS 语法转换为浏览器支持的语法。接下来就让我们一起深入学习一下吧。
Babel 的介绍
Babel 指的是“巴别塔”,出自圣经典故:
当时的人类只说一种语言,联合起来无所不能,要创建一座通向天堂的塔,上帝害怕了,为了分化他们,于是就让人类说不同的语言,人类因此失去了这种力量,分化了。而这座塔就是巴别塔。
Babel 的用途
- 转译 esnext,typescript,flow 等到目标环境支持的 js
这是最常用的功能,用来吧代码中的 esnext 的语法,ts 和 flow 的语法转为基于目标环境支持的语法的实现。并且可以吧目标环境不支持的 api 进行 polyfill - 自由自在的编译器
它暴露了很多的 api,想对源代码进行怎么转译都行 - 代码的静态分析
对代码进行 parse 之后,能够进行转换,是因为通过 AST 的结构能够理解代码,在转换之前生成目标代码之外,也可以用于分析代码的信息,进行检查。比如 linter,api 文档自动生成工具通过提取注释生成文档等。
Babel 的转译流程
Babel 是 source to source 的转换,整体转译过程分为三步:
- parse: 通过 parser 将源代码转换为抽象语法树 (AST)
- transform:遍历 AST,调用各种 transform 插件对 AST 进行增删查改
- generate: 把转换后的 AST 打印成目标代码,并生成 sourcemap
为什么是三步而不是一步呢?因为源码太乱了,没有统一的格式,直接 source to source 不现实,于是就加一层 AST,将源代码中混乱的、无意义的部分去掉,这样对 AST 操作就能统一起来了。于是一步就变成了三步。(经典中间件思维了)
简单分析一下这三步
parse
前面已经说过 parse 是将源码转换为统一格式的 AST,这个过程是一个词法分析、语法分析的过程;
比如 let name = ‘shangjianyao’; 这样一段代码,parse 先把它分成一个个不能细分的单词(术语叫 token),得到 let,name,=,‘shangjianyao’,这个过程叫词法分析,按照单词的构成规则拆分源码。
之后要把 token 进行递归的组装,生产 AST,这个过程是语法分析,按照不同的语法规则,把一组单词组合成对象。
也就是说先拆了,再按照新规则组装。
transform
transform 阶段对 parse 生成的 AST 进行处理:对 AST 进行深度优先遍历,遍历的过程中处理不同的 AST 节点会调用注册的相应的 vistor 函数(来源于插件),vistor 函数里可以对 AST 节点进行增删改,返回新的节点。这一步是逻辑处理的核心和多变的关键
generate
这个阶段会把 AST 打印成目标字符串,并且会生成 sourcemap。不同的 AST 对应不同结构的字符串。而 sourcemap 记录了从源码到目标代码的转换关系,通过它可以找到目标代码中每个节点对应的源码位置。
好好聊聊 AST
AST (Abstract Syntax Tree)抽象语法树是整个转译流程的核心,它是一个树状结构,有不同类型的节点,基本对应了 JS 语法里的数据类型和语法,我们分别了解一下:
Literal
Literal 字面量,比如 let name = ‘shangjianyao’ 中,shangjianyao 就是一个字符串字面量 StringLiteral,相应的还有数字字面量 NumericLiteral,布尔字面量 BooleanLiteral,null 字面量 NullLiteral,undefined 字面量 UndefinedLiteral,这些都是 Literal,规则就是这样的 --xxLiteral。
Identifier
也即是标识符的意思,变量名、属性名、参数名等各种声明和引用的名字,都是 Ientifer。(js 里的标识符规则是?Identifer 就是这个识别规则)
试试看,下面这段代码里有多少 identifier?
let name = 'shangjianyao';
function sayHello(<