過去，我一直想著抽時間寫一個小的前端工具，以對代碼進行自動化的重構，但是呢，經過我再三的考慮，我暫時取消了這個打算 —— 主要是沒時間，（PS：人生長樂，寫個 Charj） 但是呢，我打算寫一篇文章記錄一下相關的思路，
原因依據很多：
大部分國內的公司使用的都是 Vue，template、script、style 都耦合在一起；
大量的前端專案都是輕邏輯，不具有復雜的業務場景
前端系統被重寫的頻率太快了
JavaSript 語法太靈活，而 TypeScript 還未普及
……
簡單來說，在缺乏復雜場景的情況下，我不太想去寫這樣的工具，
如何構建前端自動化重構工具？
在我之前寫的那篇『重構的自動化』中，介紹了如何去做這樣的工具：
構建特定語言的語法決議器，
設定代碼壞味道的內容及標準，
針對于每一項壞味道，撰寫識別代碼，
撰寫代碼壞味道的建議改進和實施代碼，
實作壞味道的自動化重構，
以 Vue 為例，這個程序便是：
尋找適用于 Vue 的 AST 生成工具，如 eslint-vue-parser
尋找和撰寫適用于 Vue 編碼的相關規范，
對應規范尋找代碼中的問題，
針對該問題尋找改進點
實作自動化重構
讓我們來看個簡單的示例，如我們的代碼規范中，針對于組件庫強制規范了一定要寫 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 分鐘能完成的事情，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/232630.html
標籤：AI
上一篇：Observability：從零基礎到能夠完成微服務可觀測性的專家 - Service Map 實踐
下一篇：計算機視覺理論筆記 (12) - 影像分類和面部識別 (Image Classification & Face Recognition)