前端的自动化重构

过去，我一直想着抽时间写一个小的前端工具，以对代码进行自动化的重构。但是呢，经过我再三的考虑，我暂时取消了这个打算 —— 主要是没时间。（PS：人生长乐，写个 Charj）但是呢，我打算写一篇文章记录一下相关的思路。

原因依据很多：

大部分国内的公司使用的都是 Vue，template、script、style 都耦合在一起；
大量的前端项目都是轻逻辑，不具有复杂的业务场景
前端系统被重写的频率太快了
JavaSript 语法太灵活，而 TypeScript 还未普及
……

简单来说，在缺乏复杂场景的情况下，我不太想去写这样的工具。

如何构建前端自动化重构工具？

在我之前写的那篇『重构的自动化』中，介绍了如何去做这样的工具：

构建特定语言的语法解析器。
设定代码坏味道的内容及标准。
针对于每一项坏味道，编写识别代码。
编写代码坏味道的建议改进和实施代码。
实现坏味道的自动化重构。

以 Vue 为例，这个过程便是：

eslint-vue-parser

让我们来看个简单的示例，如我们的代码规范中，针对于 组件库 强制规范了一定要写 scoped 。而我们有大量的组件都没有相应的实践。这个时候，就可以通过这种方式来处理。分析中代码中不带 scoped 的 style，然后自动添加：

<style scoped>
</style>

添加的模式其实也比较简单：

解析后，AST 将带有标签等等的位置信息。
针对所有相关类型的文件进行识别，记录所需要重构的相关信息。 file 、 location 、 changed 、 length 。
反向遍历所有的待修改处，读取对应的文件，对应的位置，进行修改。
保存文件。
再次运行。

嗯，就是这么简单。

配套工具

根据我先前的一些调研，我整理了一些相关的资料，欢迎大家去玩。

JavaScript

如果只是针对于简单的 JavaScript 重构来说，我们可以考虑使用 jscodeshift 这一类的工具。 jscodeshift 是一个工具包，用于在多个 JavaScript 或TypeScript 文件上运行 codemods（自动代码修改）。

当然了，如果你不嫌麻烦的话，还可以使用类似的工具：

Source Esprima 4.0.1 UglifyJS2 Traceur Acorn 8.0.4 Shift Shift (no early errors) 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

嗯，原理都是相似的。

TypeScript

官方提供了 AST 解析。

从我的之前写的前端架构守护工具： https://github.com/phodal/dilay ，你就可以看到相似的代码。

CSS

针对于 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

结合 CLI 工具

当我们修改完代码之后，下一步要做的事情就是修改文件，这里推荐一下： schematics-utilities ，虽然是 Angular 上下游的工具，但是它不限于框架。

有了这个工具，我们就可以快速修改代码，如：

recorder = tree.beginUpdate(path);

recorder
    .remove(start, length)
    .insertLeft(start, value);

tree.commitUpdate(recorder);

这些都大同小异，没有什么特别之处。

总结

嗯，人生苦短，一定要花 1 小时写个工具，解决 10 分钟能完成的事情。

如何构建前端自动化重构工具？

配套工具

JavaScript

TypeScript

CSS

框架特定

结合 CLI 工具

总结

Recommend

前端重构感想

我是如何重构整个研发项目，促进自动化运维DevOps的落地？

由重构进阶前端开发入门 (三) 事件冒泡与事件代理 · krimeshu 的点滴积累

前端项目重构的些许收获

Lemonj：类 CSS 的自动化重构工具

如何为Clang编译器写插件实现自动化重构

如何为 Clang 编译器写插件实现自动化重构

VMware Kaniz Mahdi：用网格重构互联网，推进全球规模的自动化

使用Jscodeshift做自动化重构

Web进阶·重构和自动化

About Joyk