[工具包]jscodeshift-代码批量修改的工具

在vue2.x升级vue3.x的过程中遇到了大批量的代码需要手动更新，例如导出不再是export default {},而是export default default defineComponent({})类似这种问题，因为项目较多就发现每次手动修改就很奔溃，希望有个自动化的工具可以一个命令，修改掉大部分的差异问题。

因此，在网上查找到了代码重构利器-- jscodeshift ，但是关于jscodeshift使用因为官网的说明较少，网上的博客说明看的我头大的也不太知道究竟是怎么用的，又是codemod，又是 recast，又是Test加上是新手，很多不明白是怎么回事！！！

所以查找资料以及个人摸索后，在成功实现重构后，加上个人理解整理一下整个过程

概念介绍

Codemod

关于这个代码集或者库官网解释是一个可以大批量自动修改代码，但是仍需要人工检测与干预的工具。

那么 jscodeshift 又与Codemod有什么关系？jscodeshift 是一个 Javascript 的Codemod工具，因为可能存在修改java等其它语言的Codemod工具；

Recast

在我的理解当中Recast是一个用于解析源文件的一个解析器，也就是对于要修改的文件可以通过Recast解析成 Javascript 语法的树型结构–我们将这种语法树结构称之为AST抽象语法树。

那么 jscodeshift 又与 Recast 有什么关系？jscodeshift 是一个 Recast 的包装器，它也用到了Recast的解析功能

AST

上面提到了AST抽象语法树，这里简单介绍一下，因为它与我们修改文件–删除、增加、修改、查找树上的节点息息相关。

说到AST就避不开Ast Explorer,一个在线语法树解析网站。

这个在线工具非常重要！！！

这里简单说明一下，第一个选择了 javascript ,因为源文件是.ts还是.js都是 javascript，如果是其它后缀的文件可以对应选择，例如*.vue要选择vue。

下一个选框对应的就是解析器的选择，默认是recast,js文件一般都使用的是该解析器；对于ts文件有时(内容与js完全时)也可以使用该解析器，但是如果文件中的内容有类型设置时，我们会发现右侧的语法树无法查看，有报错信息，就是因为无法解析文件中的类型设置，此时该选框修改为typescript，代码成功解析成语法树

代码重构工具实战

在网上教程中很多用到了测试套件我是没太明白的，本人是直接编写相关修改文件，通过node命令直接执行该文件

AST 的流程图

实际上就是读取到源文件内容，对源文件进行解析获取到对应的AST抽象语法树，然后修改对应语法树上的节点，然后再将修改后语法树转化为文件内容，最后写入文件，完成文件的修改。

安装工具包

npm i jscodeshift

原文件

test.js ，也就是会被修改或解析的文件

const List = [
  {
   
    title: "姓名",
    key: "name",
    width: 200,
    child:{
   
      title: "姓名",
      key: "name",
    }
  },
  {
   
    title: "年龄",
    key: "age",
    width: 200
  }
];

需求是要将源文件数组中对象的字段title改成label,但是child内部的不需要修改

读取源代码

tool.js是一个工具文件，用于编写修改原文件的代码

const j = require("jscodeshift");
const fs = require("fs");//读取文件
const path = require("path");//解析文件路径
const testPath = path.resolve("./test.js");
const content = fs.readFileSync(testPath).toString()//读取文件内容

fs与path是node内置的包，不需要额外安装

解析源代码

const ast = j(content);//解析成AST树结构，默认recast解析器

如果要修改的是ts的内容，需要修改解析器

const ast = j(content,{
   
  parser : require("recast/parsers/typescript");
  }