手记

Babel是如何读懂JS代码的,并转化 ES5 代码的?

Babel是如何读懂JS代码的,并转化 ES5 代码的?

Babel的功能非常纯粹,以字符串的形式将源代码传给它,它就会返回一段新的代码字符串(以及sourcemap).他既不会运行你的代码,也不会将多个代码打包到一起,它就是个编译器,输入语言是ES6+,编译目标语言是ES5.

Babel的编译过程跟绝大多数其他语言的编译器大致同理,分为三个阶段:

  1. 解析:将代码字符串解析成抽象语法树
  2. 变换:对抽象语法树进行变换操作
  3. 再建:根据变换后的抽象语法树再生成代码字符串

第1步,Ï转换的过程中可以验证语法的正确性,同时由字符串变为对象结构后更有利于精准地分析以及进行代码结构调整
第2步,就是遍历这个对象所描述的抽象语法树,遇到哪里需要做一下改变,就直接在对象上进行操作
第3步,递归遍历这颗语法树,然后生成相应的代码

4人推荐
随时随地看视频
慕课网APP