組件分享之后端組件——一個(gè)基于 AST 的 JavaScript/Typescript/HTML 代碼轉(zhuǎn)換工具gogocode
背景
近期正在探索前端、后端韭山、系統(tǒng)端各類常用組件與工具郁季，對(duì)其一些常見的組件進(jìn)行再次整理一下，形成標(biāo)準(zhǔn)化組件專題钱磅，后續(xù)該專題將包含各類語言中的一些常用組件梦裂。歡迎大家進(jìn)行持續(xù)關(guān)注。
組件基本信息
- 組件：gogocode
- 開源協(xié)議：MIT License
- 官網(wǎng)：GoGoCode.io
內(nèi)容
本節(jié)我們分享一個(gè)基于 AST 的 JavaScript/Typescript/HTML 代碼轉(zhuǎn)換工具gogocode盖淡，它具有以下特點(diǎn)：
- 一套類 Jquery 的 API 用來查找和處理 AST
- 一套和正則表達(dá)式接近的語法用來匹配和替換代碼
相關(guān)項(xiàng)目使用案例可參考
項(xiàng)目 描述 gogocode-plugin-vue 通過這個(gè) gogocode 插件可以把 vue2 語法的項(xiàng)目轉(zhuǎn)換成 vue3 的 gogocode-cli gogocode 的命令行工具 gogocode-playground 可以在瀏覽器里嘗試 gogocode 轉(zhuǎn)換 gogocode-vscode 在 vscode 中通過此插件用 gogocode 重構(gòu)你的代碼
官方案例如下：
需要轉(zhuǎn)換的代碼
const a = 1;
const b = 2;
通過 GoGoCode 來編寫轉(zhuǎn)換代碼
const $ = require('gogocode');
const script = $(source);
// 按照你的意圖年柠，用 $_$ 當(dāng)通配符能匹配任意位置的 AST 節(jié)點(diǎn)
const aAssignment = script.find('const a = $_$');
// 獲得我們匹配的 AST 節(jié)點(diǎn)的 value
const aValue = aAssignment.match?.[0]?.[0]?.value;
// 就像替換字符串一樣去替換代碼
// 但可以忽略空格、縮進(jìn)或者換行的影響
script.replace('const b = $_$', `const b = ${aValue}`);
// 把 ast 節(jié)點(diǎn)輸出成字符串
const outCode = script.generate();
更多內(nèi)容可以參考其提供的官方地址GoGoCode.io禁舷，上面有更詳細(xì)的說明彪杉。
本文聲明：
88x31.png
知識(shí)共享許可協(xié)議
本作品由 cn華少 采用 知識(shí)共享署名-非商業(yè)性使用 4.0 國際許可協(xié)議 進(jìn)行許可。
