详解如何用babel转换es6的class语法

Babel插件开发概述

Babel是一款广泛使用的代码转码工具，在React和Vue等现代前端项目的开发流程中不可或缺。它能够将ES6及更高版本的JavaScript语法降级兼容至ES5，同时支持JSX等扩展语法的转换。

在常规项目配置中，我们通常通过加载特定的插件或预设（即插件集合，如env、stage-0等）来执行代码转换任务。

实际上，Babel支持通过自定义插件实现任意代码逻辑的转换。本文将通过一个具体案例——将es6的 class 转换为es5，来详细拆解Babel插件的开发过程。

具体操作步骤如下：

Webpack环境配置

Webpack环境配置

开发者通常配置过babel-core这个Loader，其作用是提供Babel的核心API接口。需要明确的是，实际的代码转换工作均由具体的插件完成。

接下来，我们将跳过第三方插件，手动实现一个用于转换es6类的Babel插件。首先执行以下步骤以初始化项目环境：

1. npm install webpack webpack-cli babel-core -D
2. 新建一个webpack.config.js配置文件。
3. 在配置文件中设置Webpack的相关参数。

若希望插件命名为transform-class，需在Webpack配置中进行如下注册：

随后，在node_modules目录下新建babel-plugin-transform-class文件夹以编写插件核心逻辑（在实际生产环境中，此类插件应发布至npm仓库）。具体结构如下图所示：

图中红色区域标识了新创建的文件夹，其上方展示了标准的插件项目结构。为简化演示，此处仅保留了核心的index.js文件。

Babel插件编写基础

如何编写Babel插件

Babel插件的开发核心依赖于AST（抽象语法树）。

Babel负责将JavaScript源代码解析为AST结构，允许开发者对其进行修改，最后再将修改后的AST重新生成为JavaScript代码。

这引出了两个关键问题：JavaScript源代码与AST之间的映射关系如何建立？以及如何替换或新增AST节点？

首先介绍一个辅助工具：astexplorer.net。

该工具可将一段代码实时转换为对应的AST结构：

如图所示，当我们编写一个es6类时，网页右侧会生成对应的AST。本质上，这是将每一行代码映射为一个对象，从而建立代码与数据结构间的映射关系。

接着介绍另一份重要文档：babel-types。

这是用于创建AST节点的操作API文档。

例如，若需创建一个类节点，可先在astexplorer.net中转换代码，发现类对应的AST类型为 ClassDeclaration。查阅文档可知，调用相应的API即可创建该节点：

创建其他语句节点同理。掌握上述两个工具后，即可实现任意代码转换。

下面开始正式编写插件，具体分为以下步骤：

1. 在index.js中导出一个函数。
2. 该函数返回一个对象，对象中必须包含一个名为visitor的参数。
3. 通过astexplorer.net查询得知，class 对应的AST节点类型为 ClassDeclaration。
4. 在visitor中定义一个捕获函数 ClassDeclaration，用于拦截JavaScript代码中所有的 ClassDeclaration 节点。
5. 编写具体的转换逻辑代码。

module.exports = function ({ types: t }) {
 return {
  visitor: {
   ClassDeclaration(path) {
    //在这里完成转换
   }
  }
 };
}

代码包含两个参数，第一个参数 {types:t} 用于解构出变量t，该变量对应babel-types文档中的t（见下图红框），主要用于创建节点：

第二个参数 path 表示被捕获节点的路径信息。通过访问 path.node 可获取该节点的AST对象，在此基础上进行修改即可完成转换目标。

ES6 Class转ES5实现逻辑

如何把es6的class转换为es5的类

前述内容为预备知识，真正的转换逻辑从此刻开始。首先需明确两个问题：

转换目标是将es6类转换为es5的类写法（即普通函数）。观察发现，许多代码元素可复用，包括函数名及函数内部的代码块等。

若未在class中定义 constructor 方法，JavaScript引擎会自动为其添加一个空的 constructor() 方法，因此需对此进行兼容处理。

接下来编写代码，具体思路如下：

1. 获取原有的AST节点。
2. 创建一个数组用于存放新生成的AST节点（原class虽为一个节点，但替换后可能由多个函数节点组成）。同时初始化默认的 constructor 节点（前文提及，class可能未定义constructor）。
3. 遍历旧节点的AST对象（将循环出若干函数节点）。
4. 判断函数类型是否为 constructor，若是，则提取数据创建普通函数节点，并更新默认的 constructor 节点。
5. 处理其余非 constructor 的节点，通过数据创建 prototype 类型的函数，并将其存入 es5Fns 数组中。
6. 循环结束后，将 constructor 节点也加入 es5Fns 数组。
7. 判断es5Fns数组长度是否大于1，若大于1，则使用 replaceWithMultiple API更新AST。

module.exports = function ({ types: t }) {
 return {
  visitor: {
   ClassDeclaration(path) {
    //拿到老的AST节点
    let node = path.node
    let className = node.id.name
    let classInner = node.body.body
    //创建一个数组用来成盛放新生成AST
    let es5Fns = []
    //初始化默认的constructor节点
    let newConstructorId = t.identifier(className)
    let constructorFn = t.functionDeclaration(newConstructorId, [t.identifier('')], t.blockStatement([]), false, false)
    //循环老节点的AST对象
    for (let i = 0; i < classInner.length; i++) {
     let item = classInner[i]
     //判断函数的类型是不是constructor
     if (item.kind == 'constructor') {
      let constructorParams = item.params.length ? item.params[0].name : []
      let newConstructorParams = t.identifier(constructorParams)
      let constructorBody = classInner[i].body
      constructorFn = t.functionDeclaration(newConstructorId, [newConstructorParams], constructorBody, false, false)
     } 
     //处理其余不是constructor的节点
     else {
      let protoTypeObj = t.memberExpression(t.identifier(className), t.identifier('prototype'), false)
      let left = t.memberExpression(protoTypeObj, t.identifier(item.key.name), false)
      //定义等号右边
      let prototypeParams = classInner[i].params.length ? classInner[i].params[i].name : []
      let newPrototypeParams = t.identifier(prototypeParams)
      let prototypeBody = classInner[i].body
      let right = t.functionExpression(null, [newPrototypeParams], prototypeBody, false, false)
      let protoTypeExpression = t.assignmentExpression("=", left, right)
      es5Fns.push(protoTypeExpression)
     }

    }
    //循环结束，把constructor节点也放到es5Fns中
    es5Fns.push(constructorFn)
    //判断es5Fns的长度是否大于1
    if (es5Fns.length > 1) {
     path.replaceWithMultiple(es5Fns)
    } else {
     path.replaceWith(constructorFn)
    }
   }
  }
 };
}

继承关系处理

优化继承逻辑

类转换还涉及继承处理。思路相对直接：判断AST中是否缺少 superClass 属性，若存在，则需额外添加一行代码 Bird.prototype = Object.create(Parent)，同时注意处理 super 关键字。

打包验证与总结

打包后代码

执行 npm start 命令进行打包后，观察打包后的文件内容，可见 class。

语法已成功转换为一系列es5函数。

结尾

至此，一个类转换器插件编写完毕，希望本文能帮助大家深入理解B工作原理。也欢迎大家继续支持本站。