回头再看看babel的实现原理

Posted 2020-11-03 leaf930814

一、前言

　　babel在大家的工作中应该没少用，但是为什么它能将ES6转成ES5呢？一个有态度的前端er肯定会想抛开迷雾，看看其中的奥秘。

　　记得很早前自己有去了解过相关方面的内容，但是时间久远，现在已是很模糊了。在此写点笔记回顾一下。

二、运行原理

　    抽象语法树（AST）

　　　　抽象语法树（abstract syntax tree或者缩写为AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。 和抽象语法树相对的是具体语法树（concrete syntaxtree），通常称作分析树（parse tree）。 一般的，在源代码的翻译和编译过程中，语法分析器创建出分析树。一旦AST被创建出来，在后续的处理过程中，比如语义分析阶段，会添加一些信息。

　　静态分析

　　 　　1、静态分析是在不需要执行代码的前提下对代码进行分析的处理过程 （执行代码的同时进行代码分析即是动态分析）。

　　 　　2、静态分析的目的是多种多样的， 它可用于语法检查，编译，代码高亮，代码转换，优化，压缩等等场景。

　　babel工作分为三大阶段

　　1、解析

　　　　将代码字符串解析为抽象语法树；

　　　　将整个代码分割成语法单元，进而再分析语法单元之间的关系；

　　　　这一步会验证语法的正确性，同时由字符串变为对象结构后更有利于精准地分析以及进行代码结构调整。

　　2、转换

　　　　遍历抽象树，对抽象语法树进行再变换；　这一步是babel或者其他编译器中最为复杂的过程。

　　3、生成

　　　　递归变换后的抽象语法树再生成代码字符串；

三、后话

　　上面只是简述babel工作流程，详细每一步的过程可以看后面的参考文章，写得很详细。

　　其实也没有特别高程莫测的原理，主要还是写一个语法解释器需要不少的功夫。

参考：

https://zhuanlan.zhihu.com/p/27289600

https://segmentfault.com/a/1190000008390268