babel插件分析-编写你的第一个插件

前言

  最为一个前端开发者，应该没有人不知道babel是什么，但针对不大熟悉的同学，在这里我还是简单介绍一下：JavaScript 的版本标准更新频繁，从2015年开始，就以每年一个版本的速度更新（该版本为es6），每个版本标准都会推出一些新的语法糖（装饰器语法，动态加载等），极大地提升了编程体验；在下个版本推出前，社区也会提出一些提案，涉及未来es版本的最新特性（可选链式调用等）。这些新的特性或者语法糖并不为当前的浏览器引擎所识别。因此就需要一个类似polyfill的中间工具，将这些新的特性编译为降级语法，在功能不变的前提下，支持浏览器引擎。而babel就是这个最出名的polyfill工具，成为事实上的前端生态重要组成部分。

关于AST

  在大型项目中，通常有大佬完成babel配置，作为搬砖仔只需要写业务代码就可以了。但是如果你并不满足于成为页面仔，那就需要对这个重要的底层工具有一定的深度了解。babel之所以能够替我们完成语法的转换，是因为其内置工具（基于ESTree）对我们的源码进行了静态分析，将js源码解析成为了以路径（path）和节点（node）作为基础元素的抽象语法树（AST，计算机科学中的概念）,针对js语法所允许的每一种写法，都有与之对应的描述方式与操作api，通过暴露出来的api,即可对源码进行替换，拼接，压缩等操作，输出转换后的代码。举一个最简单的例子，使用let关键字声明一个变量a:

let a =