前端的自动化重构

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

创新互联是一家专业提供炎陵企业网站建设,专注与成都网站设计、成都网站建设、H5建站、小程序制作等业务。10年已为炎陵众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。

原因依据很多：

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

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

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

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

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

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

1. 寻找适用于 Vue 的 AST 生成工具。如 eslint-vue-parser
2. 寻找和编写适用于 Vue 编码的相关规范。
3. 对应规范寻找代码中的问题。
4. 针对该问题寻找改进点
5. 实现自动化重构

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

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

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

嗯，就是这么简单。

配套工具

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

JavaScript

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

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

嗯，原理都是相似的。

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 分钟能完成的事情。

本文转载自微信公众号「phodal」，可以通过以下二维码关注。转载本文请联系phodal公众号。

文章题目：前端的自动化重构
URL网址：http://www.csdahua.cn/qtweb/news45/547645.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网