babel插件实践（二）babel插件开发

前言

上一篇文章讲述了babel编译原理流程，这一篇正式开启编写babel插件。如果对babel编译原理流程不清楚的请看上一篇文章babel插件实践（一）babel编译原理分析

@babel/core

从名称就可以看出这是babel的核心包。首先介绍一下这个包，这个包集成了上篇文章讲述的@babel/parser，@babel/traverse，@babel/generator，@babel/types这些包。也就是说这个包具备解析（parse），转换（traverse），生成代码的能力，而且还扩展了其它功能。

先看一下@babel/core的package.json文件，@babel/core的package.json，如下图看到内置了这几个包，而且还集成了其它babel包，其它包可以自行了解其作用。

image.png

本篇主要是使用babel/core来进行演示，所以需要提前了解一下常用的api，请点击这里@babel/core常用api

编写babel插件

babel插件规范

其实编写babel插件很简单，只需要按照官方提供的规则写代码就ok了。官方文档

image.png

从上图可以知道，编写自己的插件需要默认为插件提供一个方法，该方法返回一个包含visitor属性的对象。visitor也是一个对象，该对象属性支持不同节点类型对应的钩子函数，在这个函数内针对该类型的节点进行操作。（也就是上一篇我们提到的在转换那一步深度遍历节点时，提供的钩子函数）

可以根据官方提示，自己动手试一下。按照上一篇文章讲的创建一个空项目，创建build/index.js，安装@babel/core插件，

编写build/index.js代码如下：

const babel = require("@babel/core")

const code = `
class Person {
    constructor(name){
        this.name = name
    }

    say(){
        console.log(this.name)
    }
}

const person = new Person("张三");
person.say()
`
const obj = babel.transformSync(code, {
    plugins: [
        function MyPlugin(babel) {
            return {
                visitor: {
                    Identifier(path) {
                      console.log(path.type, path.node.name)
                    }
                }
            }
        }
    ]
});

console.log(obj.code);

@babel/core的transformSync方法第二个参数，可以传入plugins数组，这里就可以定自己的插件；是不是特别简单。至于插件要做什么事情，就需要自己决定了。

以上只是小试牛刀（编写的插件未单独文件抽离出来）。下边在修改一下编译代码，改为从文件读取源代码，如下

const babel = require("@babel/core")
const path = require("path");

const file = path.resolve(__dirname, './../src/index.js');

const obj = babel.transformFileSync(file, {
    plugins: [
        function MyPlugin(babel) {
            return {
                visitor: {
                    Identifier(path) {
                        console.log(path.type, path.node.name)
                    }
                }
            }
        }
    ]
});

console.log(obj.code);

transformFileSync是从文件读取编译代码。上边指定的是从src/index.js文件读取。

从以上讲述清楚的知道了babel插件是如何工作的。以代码的角度分析，其实就是babel/core提供的api有一个plugins配置属性，支持传入自定义的插件而已。

单独抽离插件

在前端项目当中，babel插件都是以独立模块出现。这时候.babelrc配置文件就派上用场了。transformFileSync第二个参数对象有一个babelrc属性，默认是true。这个属性代表是否从项目根目录读取babelrc文件获取presets和plugins配置。

接下来在项目根目录创建my-babel-plugin/index.js文件，在这个文件单独负责插件功能。把上边build/index.js插件代码移动到这里，代码如下：

module.exports = function (babel) {
    return {
        visitor: {
            Identifier(path) {
                console.log(path.type, path.node.name)
            }
        }
    }
}

build/index.js代码如下:

const babel = require("@babel/core")
const path = require("path");

const file = path.resolve(__dirname, './../src/index.js');

const obj = babel.transformFileSync(file, {
    babelrc: true
});

console.log(obj.code);

.babelrc文件配置如下：

{
    "plugins": [
        "./my-babel-plugin/index.js"
    ]
}

这时候就已经把babel插件单独抽离出来了。如果你想发布到npm上，你只需要按照发布规范和步骤发布，然后安装下来，在.babelrc配置就可以了。

细心的小伙伴发现了，要编译的源代码有es6的class语法，但是编译后的代码没有任何变化。我们之前也讲过babel/core其实只是提供了编译的流程。如果想要处理代码，还需要提供插件（在编译的第二部transform）对节点进行增删改查，才可以修改节点生成最终想要的可执行代码。正是由于babel官方提供了自定义插件的规则，才产生了现在丰富的babel插件生态。

这里如果需要处理es6及以上的语法，需要使用babel/preset-env预设包（就是插件的集合），安装该包，修改.babelrc配置

{
    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        "./my-babel-plugin/index.js"
    ]
}

在次执行编译，即可看到在控制台输出经过babel/preset-env处理后的代码，如下图

image.png

从以上编译结果，也可以更进一步了解es6的class编译成es5代码究竟是什么样子，有兴趣的可以了解一下。

babel插件Demo开发

上边我们写的插件没有任何功能，只是介绍开发一个自定义插件的前置步骤，现在我们实现一个删除console代码的插件。

第一步：首先要确定你要操作的节点类型，了解节点的特性。这里我们在线解析console.log(123)对应的ast节点。可以看到黄色部分代表的是这一行console.log(123)节点。如下

image.png

第二步：编写自定义插件代码，直接上代码，如下

module.exports = function (babel) {
    return {
        visitor: {
            Identifier(path) {
                console.log(path.type, path.node.name);
            },
            CallExpression(path) {
                if(path.node.callee && babel.types.isIdentifier(path.node.callee.object, {name: 'console'})){
                    path.remove();
                }
            }
        }
    }
}

由上图可知这个表达式对应CallExpression类型的节点，该节点有一个callee属性对应的是MemberExpression类型的节点，MemberExpression节点又有一个object属性为Identifier类型的节点，只有Identifier节点名字是console才可以判断当前节点是console类型的表达式。然后执行path.remove方法就可以删除当前节点。

上边bable.types对应的是@babel/types插件包，在插件执行的时候会作为参数传入，这个包的功能在上一篇文章已经讲过了。（在开发插件的时候这个提供的api会经常用到，所以说非常重要）。

再次执行编译，你会发现console.log/error/warn在编译后的代码里都相应的被移除了。

babel插件实践到此结束，谢谢！