开发 Babel 插件可以试试这个 CLI 工具

2022-10-12
北京
本文字数：2583 字
阅读完需：约 8 分钟

1. 前言

大家好，我是小鑫同学。一位从事过 Android 开发、混合开发，现在长期从事前端开发的编程爱好者，我觉得在编程之路上最重要的是知识的分享，所谓三人行必有我师。所以我开始在社区持续输出我所了解到、学习到、工作中遇到的各种编程知识，欢迎有想法、有同感的伙伴加我fe-xiaoxin微信交流~

在上一篇《【入门】你连 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-x2. mkdir babel-plugin-clg-insert-line && cd babel-plugin-clg-insert-line3. yo babel-plugin-x4. 补充插件信息：    ? 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来使用~

如果看完觉得有收获，欢迎点赞、评论、分享支持一下。你的支持和肯定，是我坚持写作的动力~

发布于: 刚刚阅读数: 6

原文链接:【http://xie.infoq.cn/article/7b435a696be03b9e8a7c6e88c】。文章转载请联系作者。

小鑫同学

关注

⚡InfoQ签约作者 2018-12-10 加入

还未添加个人简介

发布

暂无评论

创作场景

开发 Babel 插件可以试试这个 CLI 工具

1. 前言

2. 环境/资料准备？

2.1 必备工具：

2.2 学习资料：

3. 第一个 Babel 插件：

3.1 补充自述文档：

3.2 完善测试用例：

3.3 查看 AST 及分析：

3.4 编写插件部分：

3.4.1 已提供的模板：

3.4.2 判断是否达到处理的表达式：

3.4.3 插入代码行号：

3.5 完善一处配置和一处更改：

3.5.1 完善配置：

3.5.2 完善更改：

3.6 执行测试用例：

4. 升级优化插件：

4.1 使用 @babel/generator 来将 AST 转为 Code：

4.2 遍历 targetCalleeName 来优化判断逻辑：

5. 升级 babel-plugin-x：

6. 总结

小鑫同学

评论