组件分享之后端组件——一个基于 AST 的 JavaScript/Typescript/HTML 代码转换工具gogocode...

组件分享之后端组件——一个基于 AST 的 JavaScript/Typescript/HTML 代码转换工具gogocode

背景

近期正在探索前端、后端、系统端各类常用组件与工具，对其一些常见的组件进行再次整理一下，形成标准化组件专题，后续该专题将包含各类语言中的一些常用组件。欢迎大家进行持续关注。

组件基本信息

• 组件：gogocode
• 开源协议：MIT License
• 官网：GoGoCode.io

内容

本节我们分享一个基于 AST 的 JavaScript/Typescript/HTML 代码转换工具gogocode，它具有以下特点：

• 一套类 Jquery 的 API 用来查找和处理 AST
• 一套和正则表达式接近的语法用来匹配和替换代码

相关项目使用案例可参考

项目	描述
gogocode-plugin-vue	通过这个 gogocode 插件可以把 vue2 语法的项目转换成 vue3 的
gogocode-cli	gogocode 的命令行工具
gogocode-playground	可以在浏览器里尝试 gogocode 转换
gogocode-vscode	在 vscode 中通过此插件用 gogocode 重构你的代码

官方案例如下：
需要转换的代码

const a = 1;
const b = 2;

通过 GoGoCode 来编写转换代码

const $ = require('gogocode');
const script = $(source);
// 按照你的意图，用 $_$ 当通配符能匹配任意位置的 AST 节点
const aAssignment = script.find('const a = $_$');
// 获得我们匹配的 AST 节点的 value
const aValue = aAssignment.match?.[0]?.[0]?.value;
// 就像替换字符串一样去替换代码
// 但可以忽略空格、缩进或者换行的影响
script.replace('const b = $_$', `const b = ${aValue}`);
// 把 ast 节点输出成字符串
const outCode = script.generate();

更多内容可以参考其提供的官方地址GoGoCode.io，上面有更详细的说明。

本文声明：

88x31.png

知识共享许可协议
本作品由 cn華少 采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。