babel 插件开发案例

本文将以把es6的语法 let 改为 var 为例，讲述如何编写一个babel插件。其中涉及到一些babel的基本知识，babel的工作流程，语法抽象树等。

babel简介

关于babel 官网做了如下解释:

Babel 是一个 工具 链，主要用于在旧的浏览器或环境中将 ECMAScript 2015+ 代码转换为向后兼容版本的 JavaScript 代码

相信大家在开发中或多或少的都使用过 bable 对代码进行编译。在babel配置文件 .babelrc 中最主要就是对 presets 和 Plugins 的配置。其中 presets 通俗来说就是某一类的插件转译集合，比如说babel官方封装好的 @babel/preset-react 中就包括以下插件 @babel/plugin-syntax-jsx ， @babel/plugin-transform-react-jsx ， @babel/plugin-transform-react-display-name 。而Plugins相对来说功能比较单一，比如 transform-es2015-arrow-functions ，这个插件只负责转译es2015新增的箭头函数。

所以在我们的日常开发中也可以根据自己的需求开发bebal插件，从而提高开发效率。

babel的编译过程

Babel转码的过程分三个阶段：解析(parse)、转换(transform)、生成(generate)。下面这张图可以很好的说明babel的工作过程

• 解析,解析步骤接收代码并输出 AST。
• 转换,转换步骤接收AST并对其进行遍历，在此过程中对节点进行添加、更新及移除等操作
• 生成,代码生成步骤把最终（经过一系列转换之后）的 AST 转换成字符串形式的代码，同时还会创建源码映射（source maps）。

其中，解析、生成阶段由Babel核心完成，而转换阶段，则由Babel插件完成，这也是本文的重点。

抽象语法树（AST）

在计算机科学中，抽象语法树（Abstract Syntax Tree，AST），或简称语法树（Syntax tree），是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。之所以说语法是“抽象”的，是因为这里的语法并不会表示出真实语法中出现的每个细节。

开发一个babel插件一定要对AST有所了解，上面是维基百科对抽象语法树的解释

举个例子：

var a = 1;
复制代码

转换成的AST结构为：

这里是可以实时查看代码ast结构的网站astexplorer.net/，有助于更好的了解ast以及编写babel插件

开发babel插件

安装@babel/cli,@babel/core

可用于从命令行编译文件

"@babel/cli": "^7.1.5",
 "@babel/core": "^7.1.6",
复制代码

新建js文件

新建一个 babel-letToVar.js 文件，代码如下

function letToVar(babel) {

  const { types: t, template } = babel;
  return visitor = { };
}

module.exports = letToVar;
复制代码

我们可以在 letToVar 这个方法中接收babel对象。

visitor 属性是这个插件的主要访问者，且其中的每个函数接收2个参数：path 和 stat。访问者是一个用于 AST 遍历的跨语言的模式。简单的说它们就是一个对象，定义了用于在一个树状结构中获取具体节点的方法。

我们的需求是将 let 转换成 var ,那么我们需要添加一个 VariableDeclaration 访问者方法

function letToVar(babel) {
  const { types: t, template } = babel;
  const visitor = {
    VariableDeclaration(path) {
      if(path.get('kind').node!='let')return;
        path.node.kind='var';
      }
  };
  return {visitor};
}

module.exports = letToVar;
复制代码

我们可以通过path.get()方法获取到kind,并判断他是不是为let，如果是就将其改为var，以实现我们的需求。

下面我们可以运行看一下效果是否符合我们的预期。

新建 .eslintrc 文件

我们可以直接在此文件中引入我们的babel-letToVar.js文件

{
  "plugins": [ "./babel-letToVar.js"]
}
复制代码

运行并查看效果

我们可以在终端运行下面命令，将inedx.js文件编译后输出到dest.js文件中。

$ babel index.js --out-file dest.js
复制代码

下图是运行效果，可以看到已经实现了我们的需求。

总结

本文演示的只是一个简单的babel插件的开发，我们在转换的过程中拿到代码的AST结构后，就可以随心所欲的对代码进行增加、删除、修改。我们还可以通过编写babel插件实现更多的功能，比如删除代码中所有 console.log 等。