前端进阶：来自 2022 年的代码转换教程

过去一年，我们新鲜开源的代码转换工具 GoGoCode 获得了社区不少朋友的喜爱和支持，在这样一个小众的领域获得了 2.7k 个 star 以及热情的用户反馈，让我们感到「代码转换」有着比我们想象的广泛得多的需求，只不过以前它总是作为一种潜藏的技术不为人所知。

于是在 2022 年，我们花了一些时间编写一份从零开始的、现代的代码转换教程，试图用一个个鲜活的例子来践行 GoGoCode 的 slogan：代码转换从未如此简单。

篇幅有点长，例子有点多，请做好准备。

一次代码转换的基本流程

CodMod

上图概述了一次代码转换的四个流程，我们接下来的教程也会按照这四步依次进行：

把代码解析成抽象语法树（AST）
找到我们要改动的代码
把它修改成我们想要的样子
把它再生成回字符串形式的代码

通过 GoGoCode 读取并解析代码

首先我们安装并引入 GoGoCode

npm install gogocode --save
复制代码

import $ from 'gogocode';
// or for commonjs
const $ = require('gogocode');
复制代码

我们借用 jQuery 的 $ 命名让代码写起来更简单！

使用 GoGoCode 解析不同类型的代码：

// source 为待解析代码的字符串

// 解析 JavaScript/TypScript 文件
const ast = $(source);

// 解析 html 文件需要在传入的 parseOptions 中指定 language
const ast = $(source, { parseOptions: { language: 'html' } });

// 解析 Vue 文件
const ast = $(source, { parseOptions: { language: 'vue' } });
复制代码

Tips：本教程中的代码片段你可以在 GoGoCode PlayGround 中立刻尝试一下！

playground

如图所示的下拉框中可以切换代码类型，右侧会提供对应的样板代码。

通过代码选择器选择代码

在把代码从字符串解析成 AST 后，我们进入第二步，从一整段代码中精确查找到我们要修改的 AST 节点。

ast.find 代码选择器

与其它代码转换工具通过 AST 类型去匹配语法树节点不同，GoGoCode 提供了更直观的「用代码找代码」的方式，和 jQuery 查找 DOM 一样，你只需要编写一段代码片段作为「代码选择器」，GoGoCode 就能智能地帮你匹配到源码中和它吻合的片段。

假设你想在下面代码中挑选出名为 log 的函数：

function log(a) {
  console.log(a);
}

function alert(a) {
  alert(a);
}
复制代码

只需要按照如下方式使用 find 方法即可：

const ast = $(source);
const test1 = ast.find('function log() {}');
复制代码

GoGoCode 会根据 function log() {} 自动去帮你匹配名为 log 的 function 节点，返回能满足匹配条件的子节点。

用 generate 把节点输出成代码字符串

只要对找到 AST 节点调用 .generate，就可以得到这个节点对应的代码字符串。

const ast = $(source);
const test1 = ast.find('function log() {}');

const code = test1.generate()
// code 是如下字符串：
// function log(a) {
//   console.log(a);
// }
复制代码