前言
最为一个前端开发者,应该没有人不知道babel是什么,但针对不大熟悉的同学,在这里我还是简单介绍一下:JavaScript 的版本标准更新频繁,从2015年开始,就以每年一个版本的速度更新(该版本为es6),每个版本标准都会推出一些新的语法糖(装饰器语法,动态加载等),极大地提升了编程体验;在下个版本推出前,社区也会提出一些提案,涉及未来es版本的最新特性(可选链式调用等)。这些新的特性或者语法糖并不为当前的浏览器引擎所识别。因此就需要一个类似polyfill的中间工具,将这些新的特性编译为降级语法,在功能不变的前提下,支持浏览器引擎。而babel就是这个最出名的polyfill工具,成为事实上的前端生态重要组成部分。
关于AST
在大型项目中,通常有大佬完成babel配置,作为搬砖仔只需要写业务代码就可以了。但是如果你并不满足于成为页面仔,那就需要对这个重要的底层工具有一定的深度了解。babel之所以能够替我们完成语法的转换,是因为其内置工具(基于ESTree)对我们的源码进行了静态分析,将js源码解析成为了以路径(path)和节点(node)作为基础元素的抽象语法树(AST,计算机科学中的概念),针对js语法所允许的每一种写法,都有与之对应的描述方式与操作api,通过暴露出来的api,即可对源码进行替换,拼接,压缩等操作,输出转换后的代码。举一个最简单的例子,使用let关键字声明一个变量a:
let a =