基于：系统重构与迁移指南
出自《软件之道：软件开发争议问题剖析》第 23 章
不同软件指标模型总体准确率
| 模型 | 查准率 | 查全率 |
|---|---|---|
| 组织结构 | 86.2% | 84.0% |
| 代码变动 | 78.6% | 79.9% |
| 代码复杂度 | 79.3% | 66.0% |
| 社会网络/综合指标 | 76.9% | 70.5% |
| 依赖关系 | 74.4% | 69.9% |
| 代码覆盖率 | 83.8% | 54.4% |
工具：
在我之前写的那篇『重构的自动化』中，介绍了如何去做这样的工具：
以 Vue 为例，这个过程便是：
eslint-vue-parser如果只是针对于简单的 JavaScript 重构来说，我们可以考虑使用 jscodeshift 这一类的工具。jscodeshift 是一个工具包，用于在多个 JavaScript 或TypeScript 文件上运行 codemods（自动代码修改）。
当然了，如果你不嫌麻烦的话，还可以使用类似的工具：
| Source | Esprima 4.0.1 | [UglifyJS2](https://github.com/mishoo/UglifyJS2) | [Traceur](https://github.com/google/traceur-compiler) | [Acorn](https://github.com/marijnh/acorn) 8.0.4 | [Shift](https://github.com/shapesecurity/shift-parser-js) | [Shift (no early errors)](https://github.com/shapesecurity/shift-parser-js) |
|---|---|---|---|---|---|---|
| jQuery.Mobile 1.4.2 | 149.6 ±1.8% | 170.7 ±1.2% | 178.2 ±6.0% | 214.4 ±13.0% | 429.5 ±13.5% | 203.9 ±9.6% |
| Angular 1.2.5 | 125.0 ±2.8% | 138.2 ±2.9% | 134.5 ±2.3% | 113.8 ±2.8% | 251.5 ±1.3% | 147.1 ±1.5% |
| React 0.13.3 | 127.2 ±1.0% | 158.2 ±1.4% | 160.0 ±0.8% | 128.5 ±2.8% | 310.8 ±2.7% | 182.6 ±2.7% |
| Total | 401.8 ms | 467.0 ms | 472.7 ms | 456.7 ms | 991.9 ms | 533.5 ms |
嗯，原理都是相似的。
官方提供了 AST 解析。
从我的之前写的前端架构守护工具：https://github.com/phodal/dilay，你就可以看到相似的代码。
针对于 CSS 重构来说，相似的工具有：https://github.com/csstree/csstree
不过，我们建议你们使用 Lemonj（使用 Antlr 进行语法树解析）：https://github.com/twfe/lemonj
针对于 Angular，官方提供了 Angular Schematics，除了自动代码修改，还可以做各种自动化升级工作。
针对于 Vue，官方也有类似的工具：https://github.com/vuejs/vue-codemod
针对于 React，官方也有工具：https://github.com/reactjs/react-codemod
当我们修改完代码之后，下一步要做的事情就是修改文件，这里推荐一下：schematics-utilities，虽然是 Angular 上下游的工具，但是它不限于框架。
有了这个工具，我们就可以快速修改代码，如：
recorder = tree.beginUpdate(path);
recorder
.remove(start, length)
.insertLeft(start, value);
tree.commitUpdate(recorder);这些都大同小异，没有什么特别之处。