代码的复用是一件很常见的事情，如果是公共代码的复用那还好说，直接做成一个内部私有库，想用的话安装一下 npm包就行了，但是业务代码的复用就不好做成包了，一般都是复制粘贴
我一般写代码的时候，如果觉得某段业务代码以前见过其他人写过，那么考虑到业务优先性，只要别人的代码不是写得太烂，我一般会优先抄别人的代码，省得自己再写一遍
然后我就遇到了一个问题，公司目前前端项目大部分都是 vue，早期没有 ts这个说法，后来新项目才逐渐引入 ts，所以新项目用的是 vue-ts，而一般想抄的老代码都是没有引入 ts的，固然，这二者是可以兼容存在的，但对于有着轻微代码洁癖的我来说，还是不想看到同一个项目代码里掺杂着 ts和非 ts两种写法的，所以只要有时间，我都会尽量手动把老代码转化为 ts规范的
难度倒是没多少，只不过每一份都要手动转一遍，转得多了我忽然陷入沉思，我好像 repeat myself了啊，不太能忍，于是决定写一个自动将 vue-js转成 vue-ts的工具
这个工具的代码已经被我放到 github 上了，并且为了方便使用，我已经将其做成了一个 npm 包，感兴趣的可以亲自试一下
@babel
涉及到 js语法转换的东西，第一时间想到的就是 babel了，babel早就提供了丰富完善的 js语法的解析与反解析工具
@babel/parser
@babel/parser 是负责解析 js语法的工具，可以理解为将 js语法转化为 ast，方便开发者进行自定义处理，通过 plugins来支持多种 js语法，例如 es6、es7、ts、flow、jsx甚至是一些实验室的语法(experimental language proposals)等
例如：
const code = 'const a = 1'
const ast = require("@babel/parser").parse(code)
转换后的 ast就是一个对象，数据结构描述的就是 const a = 1这个表达式
对这个 ast进行遍历，就可以获得所有当前解析的 js语法的信息，自然也能对其进行修改
@babel/generator
有解析就有反解析， @babel/generator用于将@babel/parser解析出的 ast转化回字符串形式的 js代码
const code = 'const a = 1;'
const ast = require("@babel/parser").parse(code)
const codeStr = require('@babel/generator').default(ast).code
code === codeStr // => true
其他
一般 @babel/parser、@babel/generator 和 @babel/traverse会一起出现使用，前两个前面已经介绍过了，至于 @babel/traverse，其主要作用就是对 @babel/parser生成的 ast进行遍历，提供了一些方法，省得开发者自己去做各种判断
