开发 Babel 插件可以试试这个 CLI 工具
1. 前言
大家好,我是小鑫同学。一位从事过Android开发、混合开发,现在长期从事前端开发的编程爱好者,我觉得在编程之路上最重要的是知识的分享,所谓三人行必有我师。
在上一篇【入门】你连Babel都不会配?那插件不成乱装了中讲述了 babel 的使用和插件/预设的配置,这一篇我想写写 Babel 插件开发的学习过程,在翻找资料的时候发现的这个可能已经过时的 CLI 工具, 那么就跟随我来快速搞定第一个 Babel 插件吧~
2. 环境/资料准备?
2.1 必备工具:
- babel-plugin-2:插件开发套件(fork自generator-babel-plugin);
- AST Explorer:抽象语法树在线分析;
2.2 学习资料:
3. 第一个 Babel 插件:
对代码块中 console 在执行时可以输出所在的代码行数,我们的例子也是 COPY 自 Babel 插件通过秘籍的第一个用例,也推荐详细去学习一下~
1. npm i -g yo generator-babel-plugin-x
2. mkdir babel-plugin-clg-insert-line && cd babel-plugin-clg-insert-line
3. yo babel-plugin-x
4. 补充插件信息:
? Plugin Name clg-insert-line
? Description
? GitHub username or organization
? Author's Name
? Author's Email
? Key your keywords (comma to split)
执行完上面的步骤后就生成了第一个拥有标准自述文档、测试用例的完整插件项目~
3.1 补充自述文档:
CLI 生成的自述文档包括范例、安装、使用的方式,我们只需要补充需要处理的代码和处理完成后的结果代码~
console.log(1);
function func() {
console.info(2);
}
export default class Clazz {
say() {
console.debug(3);
}
render() {
return <div>{console.error(4)}</div>;
}
}
console.log("line 1", 1);
function func() {
console.info("line 4", 2);
}
export default class Clazz {
say() {
console.debug("line 9", 3);
}
render() {
return <div>{console.error("line 12", 4)}</div>;
}
}
3.2 完善测试用例:
在插件项目的__tests__/fixtures/example
目录下生成了第一个测试用例,我们需要完善actual.js
和expected.js
,其实也是自述文档中补充的两块代码,我们编写后的插件在对actual.js
的内容处理后的结果应该和expected.js
的内容一致~
3.3 查看 AST 及分析:
Astexplorer,我们在选中其中一条console
语句后右侧窗口高亮了一片 ExpressionStatement 区域,我们需要的是被包裹在里面的调用表达式CallExpression
,这CallExpression
里面包含被调用表达式(callee
) 调用参数(arguments
)。
- 通过
callee
中包含的信息来判断是否符合我们要处理的位置; - 读取
loc/start/line
属性可以得到当前调用表达式所在行号; - 通过向
arguments
数组的第一位插入行号来完成目标;
3.4 编写插件部分:
3.4.1 已提供的模板:
在这个插件模板中我们将需要被关注的表达式添加到visitor对象中,当遍历到 AST 为我们关注的表达式时将会被执行,在 t
中还包含了很多实用的工具待我们发掘~
export default function({types: t }) {
return {
visitor: {
}
};
}
3.4.2 判断是否达到处理的表达式:
- 判断
callee
的类型是否符合MemberExpression
; - 判断
path.node.callee.object.name
是否为console
; - 判断
path.node.callee.property.name
是否包含'log', 'info', 'error', 'debug'
;
CallExpression(path) {
if (t.isMemberExpression(path.node.callee)
&& path.node.callee.object.name === 'console'
&& ['log', 'info', 'error', 'debug'].includes(path.node.callee.property.name)
) {
。。。
}
}
3.4.3 插入代码行号:
使用t.stringLiteral(`line ${line}`)
来实现 AST 对象插入~
const { line } = path.node.loc.start;
path.node.arguments.unshift(t.stringLiteral(`line ${line}`))
3.5 完善一处配置和一处更改:
3.5.1 完善配置:
在待处理的源码中涉及到了 jsx 语法的处理,这里需要特殊配置才能支持,我们在调用插件的时候也就是测试用例的 babel 配置中处理就可以~
{
"plugins": [
["../../../src"]
],
// 补充支持 jsx
"parserOpts": {
"plugins": [
"jsx"
]
}
}
3.5.2 完善更改:
在transformFileSync
执行后会有一些代码风格的差异会影响到测试用例的结果,我们可以replace掉这些空白字符~
expect(actual.trim().replace(/\s/g,"")).toEqual(expected.trim().replace(/\s/g,""));
3.6 执行测试用例:
4. 升级优化插件:
4.1 使用@babel/generator来将 AST 转为 Code:
const generate = require("@babel/generator").default;
export default function ({ types: t }) {
return {
visitor: {
CallExpression(path) {
const calleeName = generate(path.node.callee).code;
consolg.log(calleeName);
}
}
};
}
4.2 遍历targetCalleeName来优化判断逻辑:
const generate = require("@babel/generator").default;
const targetCalleeName = ['log', 'info', 'error', 'debug'].map(item => `console.${item}`);
export default function ({ types: t }) {
return {
visitor: {
CallExpression(path) {
const calleeName = generate(path.node.callee).code;
if (targetCalleeName.includes(calleeName)) {
const { line } = path.node.loc.start;
path.node.arguments.unshift(t.stringLiteral(`line ${line}`))
}
}
}
};
}
5. 升级babel-plugin-x:
目前最近的Babel插件版本(v7+)都采用Ts编写,并且风格略有不同,在Ts中使用types相关的API也更加容易上手,所以更新后的Cli将支持这一风格的编写~
6. 总结
通过使用 yo babel-plugin-x
生成的插件模版来快速上手了第一个 babel插件,当你感受到了 babel 的作用后再去了解每个模块的作用,再去拆解每一块的功能也可能会更好~
babel-plugin
源 Cli
插件已经多年不维护了,有个 BUG 的 PR 一直没有合并导致没法使用,所以我推了一个 babel-plugin-x
来使用~
相关文章
- windows服务创建工具srvany.exe介绍
- 【可靠性测试】什么是可靠性测试:定义、方法和工具
- 域内信息查询工具AdFind
- 分享一个WPF 实现 Windows 软件快捷小工具
- Idea居然还有比Navicat、Datagrid工具还好用、还快的插件,效率又可提升一倍了
- 下载神器IDM+,比迅雷还快的工具 IDM多个版本(电脑、手机、浏览器插件都有)
- PS画画工具推荐:ps 绘画透视辅助插件怎么用
- PS画画工具推荐:让画面一键发光的 PS 插件如何使用
- Keka for Mac(压缩解压工具) v1.2.59中文版
- 【Java 虚拟机原理】垃圾回收算法( Java VisualVM 工具 | 安装 Visual GC 插件 | 使用 Java VisualVM 分析 GC 内存 )
- 【Windows 逆向】CheatEngine 工具 ( CheatEngine 简介 | 使用 Lazarus 编译 CE 源码 | CheatEngine 相关文档资料 )
- 【Android Gradle 插件】AaptOptions 配置 ① ( AaptOptions#additionalParameters 附加参数配置 | aapt 工具帮助文档 )
- 【Android Gradle 插件】Gradle 构建工具简介 ① ( Gradle 环境配置 | 官网下载 Gradle 软件包 | 在本地用户目录下查找 | 配置 Gradle 环境变量 )
- 工具强大的Linux NEA工具,打造完美系统(linuxnea)
- 掌握SQL Server:必备的强大工具(sqlserver工具)
- 开启Linux之旅:网页制作工具(linux网页制作工具)
- Intel 发布一款新的调整 GPU 主频的开源工具
- K-3D是基于GNU/Linux和Win32的一个三维建模、动画和绘制系统,是一款免费、开放原始码的 3D 模型和动画制作与渲染 (rendering) 工具,它强大的功能可以满足专业人士的需求。它可以创建和编辑 3D 几何图形,提供极具弹性的面向对象的插件增强功能及以节点作基础的可视化管线架构,所有参数和选项的调整,都会立即显现结果,而且可以无限次数地复原与取消复原。此外,它使用与 RenderMan 相符的渲染引擎 (render engine),可创作出电影质量的 3D 动画。
- Epiphany是Gnome默认的浏览器,主要希望用户能关注其内容而不是浏览器本身。安装Epiphany时,你就会为其表现惊艳。同时记得安装Epiphany拓展软件包,可以使用很多插件和工具。但是Epiphany在观看Flash或JavaScript网站时会遇到问题,不过相信这一点很快就会得到解决。
- MongoDB 图形界面工具推荐:方便易用的GUI管理工具(mongodbgui)
- OnionShare 一个开源的文件分享工具,可以让你安全和匿名地共享任何大小的文件。
- K-3D是基于GNU/Linux和Win32的一个三维建模、动画和绘制系统,是一款免费、开放原始码的 3D 模型和动画制作与渲染 (rendering) 工具,它强大的功能可以满足专业人士的需求。它可以创建和编辑 3D 几何图形,提供极具弹性的面向对象的插件增强功能及以节点作基础的可视化管线架构,所有参数和选项的调整,都会立即显现结果,而且可以无限次数地复原与取消复原。此外,它使用与 RenderMan 相符的渲染引擎 (render engine),可创作出电影质量的 3D 动画。
- MySQL数据库上传新奇的工具(mysql数据库上传工具)
- MySQL数据库备份小工具实用攻略(mysql备份工具)
- jcrop网页截图工具(插件)开发
- 6款经典实用的jQuery小插件及源码(对话框/提示工具等等)