如何理解前端的自動化重構

本篇內容主要講解“如何理解前端的自動化重構”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何理解前端的自動化重構”吧!

過去，我一直想著抽時間寫一個小的前端工具，以對代碼進行自動化的重構。但是呢，經過我再三的考慮，我暫時取消了這個打算 ——  主要是沒時間。(PS：人生長樂，寫個 Charj) 但是呢，我打算寫一篇文章記錄一下相關的思路。

原因依據很多：

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，然后自動添加：

<style scoped> </style>

添加的模式其實也比較簡單：

1. 鴻蒙官方戰略合作共建——HarmonyOS技術社區

2. 解析后，AST 將帶有標簽等等的位置信息。

3. 針對所有相關類型的文件進行識別，記錄所需要重構的相關信息。file、 location、 changed、 length。

4. 反向遍歷所有的待修改處，讀取對應的文件，對應的位置，進行修改。

5. 保存文件。

6. 再次運行。

嗯，就是這么簡單。

配套工具

根據我先前的一些調研，我整理了一些相關的資料，歡迎大家去玩。

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);

這些都大同小異，沒有什么特別之處。

到此，相信大家對“如何理解前端的自動化重構”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！