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插件实践系列到这里结束，谢谢！
