如何编写一个babel插件?babel插件万能模板

前言

想要提高工作效率,想要更多的时间去摸鱼,那么babel插件绝对是一大利器。babel的强大之处就像《风云》中步惊云手中的绝世好剑一样,快如闪电,所向披靡,敌人无不望风而逃

但是有些同学感觉babel插件好难呀,经常忘记怎么编写。这就像看着别人手里的绝世好剑,自己只能流口水🤤

所以我们用此篇文章来讲一下babel插件的模板,让大家只用套用模板就可以了,方便大家使用和记忆

搭建最小babel运行环境

首先我们应该搭建babel的最小运行环境,方便我们运行和调试

新建目录

js 复制代码
mkdir customPlugin && cd customPlugin

然后初始化pacage.json

js 复制代码
npm init -y

安装两个必须的包

@babel/core : Babel核心包
@babel/cli : 是 Babel 生态系统中的一个命令行工具,它提供了一个简单易用的接口,让你可以通过命令行来使用 Babel 进行代码转换。

js 复制代码
npm i @babel/core @babel/cli -D

再在customPlugin目录下创建.babelrc文件

.babelrc文件是用来干什么的呢? 是 Babel 的配置文件,用于指定 Babel 在代码转换过程中所使用的插件(Plugin)和预设(Presets),以及其他相关选项。

js 复制代码
{
  "plugins": ["./pluginDemo.js"]
}

plugin中引用我们的插件,插件内容稍后我们会写

package.json中添加编译命令, 用于编译src下面的文件到dist目录

js 复制代码
 "scripts": {
    "build": "babel src -d dist"
  },

插件的基本结构

插件本身是一个函数,函数的入参是 babel 对象,从中我们可以拿到 babel 的所有成员,最常用的是 types 对象,它是由 babel-types 包提供的一个工具对象,用于构造、验证以及变换 AST 节点。对编写处理 AST 逻辑非常有用,编写插件会频繁的使用这个对象。

如下是一个插件的最基本的结构,返回一个对象,对象中有定义了一个访问者(visitor)。

js 复制代码
module.exports = (babel) => {
  return {
    visitor: {
        ...
    }
  }
}

简单实战

接下来我们开始实战演示

我们把

js 复制代码
console.log(1);

中的值1改为2

学习使用AST explorer

先来上网站 https://astexplorer.net/ 网站的意思就是AST 探索者的意思,比较好记

然后看一下下面这张图,看一下astexplorer网站如何使用

然后上面这些选项都不怎么使用,除了type其他都可以暂时隐藏掉

此时在需要解析的代码中放入我们要解析的代码

编写插件几个常用的概念

  1. babel:插件的入参,可以从中拿到 types 对象,操作 AST 节点,由于 types 对象太常用了,babel 大部分情况下写做 {types:t}。
  2. visitor:插件核心对象,其中定义了插件生效的节点类型,以及生效方式。
  3. path:path 对象代表了当前节点的路径,通过 path 节点可以访获得当前的 node 对象,以及和该路径相关的对象,比如父节点、兄弟节点等。path 对象上还包含一些操作路径的方法等。

如何访问node?

我们写babel插件其实就是对node的增删改。

我们知道AST是由一个个node组成的,那么这些node是如何区分的呢?我们如何访问这些node呢?

第一个问题: node是通过type来进行区分的,所以第二个问题也就好回答了:node是通过type来访问的。

那么问题来了ast为什么要这样设计呢?

因为我们的babel插件是要解决某一类有共性的问题的,而且一个插件一般只解决一种问题,所以这也是为什么设计使用type来进行区分和访问的原因

那么node的值都有哪些呢,这个我们可以去astExplorer网站上查看,一目了然

比如typeNumericLiteral的这个值,他的node包含如下

编写插件

我们只需要把node中的value值修改一下就可以了

然后我们把在网站中写的插件内容,复制到我们customPlugin程序中的插件中,因为customPlugin插件中只支持commonjs modules模式,所以我们复制的时候需要转化一下导出方法

./pluginDemo.js

js 复制代码
module.exports = (babel) => {
  const { types: t } = babel;

  return {
    name: "ast-transform", // not required
    visitor: {
      NumericLiteral(path) {
        path.node.value = 2;
      }
    }
  };
}

然后我们运行编译命令

js 复制代码
npm run build

最后查看一下dist中的输出内容

./dist/test.js

js 复制代码
console.log(2);

写到这里,肯定有同学要骂了,我看了你10分钟文章,你就实现了个这?什么垃圾废文!

首先我这篇文章主要是讲babel插件的模板的,实战我们会在后面的文章中陆续更新

总结

  1. 首先我们学习了babel插件的最小运行环境,方便我们测试和调试我们的插件
  2. 讲了babel插件的模板的格式,Babel 插件通过定义访问者(visitor)对象,定义了需要处理的节点类型以及执行的操作。
  3. 讲解了如何使用AST explorer网站,如何使用这个网站帮助我们快速查看node节点,以及快速编写,调试babel插件
  4. 了解了编写插件的几个常用概念babel,type,path

后面还简单的写了一个插件,虽然写的太简单了,但是后面我们会循序渐进,写更多的实战内容

参考

相关推荐
web Rookie29 分钟前
JS类型检测大全:从零基础到高级应用
开发语言·前端·javascript
Au_ust37 分钟前
css:基础
前端·css
帅帅哥的兜兜37 分钟前
css基础:底部固定,导航栏浮动在顶部
前端·css·css3
yi碗汤园40 分钟前
【一文了解】C#基础-集合
开发语言·前端·unity·c#
就是个名称41 分钟前
购物车-多元素组合动画css
前端·css
编程一生1 小时前
回调数据丢了?
运维·服务器·前端
丶21361 小时前
【鉴权】深入了解 Cookie:Web 开发中的客户端存储小数据
前端·安全·web
Missmiaomiao2 小时前
npm install慢
前端·npm·node.js
程序员爱技术4 小时前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
并不会5 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器