前端的自動(dòng)化重構(gòu)
過去，我一直想著抽時(shí)間寫一個(gè)小的前端工具，以對(duì)代碼進(jìn)行自動(dòng)化的重構(gòu)。但是呢，經(jīng)過我再三的考慮，我暫時(shí)取消了這個(gè)打算 —— 主要是沒時(shí)間。(PS：人生長樂，寫個(gè) Charj) 但是呢，我打算寫一篇文章記錄一下相關(guān)的思路。
原因依據(jù)很多：
- 大部分國內(nèi)的公司使用的都是 Vue，template、script、style 都耦合在一起;
- 大量的前端項(xiàng)目都是輕邏輯，不具有復(fù)雜的業(yè)務(wù)場(chǎng)景
- 前端系統(tǒng)被重寫的頻率太快了
- JavaSript 語法太靈活，而 TypeScript 還未普及
- ……
簡單來說，在缺乏復(fù)雜場(chǎng)景的情況下，我不太想去寫這樣的工具。
如何構(gòu)建前端自動(dòng)化重構(gòu)工具?
在我之前寫的那篇『重構(gòu)的自動(dòng)化』中，介紹了如何去做這樣的工具：
- 構(gòu)建特定語言的語法解析器。
- 設(shè)定代碼壞味道的內(nèi)容及標(biāo)準(zhǔn)。
- 針對(duì)于每一項(xiàng)壞味道，編寫識(shí)別代碼。
- 編寫代碼壞味道的建議改進(jìn)和實(shí)施代碼。
- 實(shí)現(xiàn)壞味道的自動(dòng)化重構(gòu)。
以 Vue 為例，這個(gè)過程便是：
- 尋找適用于 Vue 的 AST 生成工具。如 eslint-vue-parser
- 尋找和編寫適用于 Vue 編碼的相關(guān)規(guī)范。
- 對(duì)應(yīng)規(guī)范尋找代碼中的問題。
- 針對(duì)該問題尋找改進(jìn)點(diǎn)
- 實(shí)現(xiàn)自動(dòng)化重構(gòu)
讓我們來看個(gè)簡單的示例，如我們的代碼規(guī)范中，針對(duì)于組件庫強(qiáng)制規(guī)范了一定要寫 scoped。而我們有大量的組件都沒有相應(yīng)的實(shí)踐。這個(gè)時(shí)候，就可以通過這種方式來處理。分析中代碼中不帶 scoped 的 style，然后自動(dòng)添加：
- <style scoped>
- </style>
添加的模式其實(shí)也比較簡單：
- 解析后，AST 將帶有標(biāo)簽等等的位置信息。
- 針對(duì)所有相關(guān)類型的文件進(jìn)行識(shí)別，記錄所需要重構(gòu)的相關(guān)信息。file、 location、 changed、 length。
- 反向遍歷所有的待修改處，讀取對(duì)應(yīng)的文件，對(duì)應(yīng)的位置，進(jìn)行修改。
- 保存文件。
- 再次運(yùn)行。
嗯，就是這么簡單。
配套工具
根據(jù)我先前的一些調(diào)研，我整理了一些相關(guān)的資料，歡迎大家去玩。
JavaScript
如果只是針對(duì)于簡單的 JavaScript 重構(gòu)來說，我們可以考慮使用 jscodeshift 這一類的工具。jscodeshift 是一個(gè)工具包，用于在多個(gè) JavaScript 或TypeScript 文件上運(yùn)行 codemods(自動(dòng)代碼修改)。
當(dāng)然了，如果你不嫌麻煩的話，還可以使用類似的工具：
| 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 解析。
從我的之前寫的前端架構(gòu)守護(hù)工具：https://github.com/phodal/dilay，你就可以看到相似的代碼。
CSS
針對(duì)于 CSS 重構(gòu)來說，相似的工具有：https://github.com/csstree/csstree
不過，我們建議你們使用 Lemonj(使用 Antlr 進(jìn)行語法樹解析)：https://github.com/twfe/lemonj
框架特定
針對(duì)于 Angular，官方提供了 Angular Schematics，除了自動(dòng)代碼修改，還可以做各種自動(dòng)化升級(jí)工作。
針對(duì)于 Vue，官方也有類似的工具：https://github.com/vuejs/vue-codemod
針對(duì)于 React，官方也有工具：https://github.com/reactjs/react-codemod
結(jié)合 CLI 工具
當(dāng)我們修改完代碼之后，下一步要做的事情就是修改文件，這里推薦一下： schematics-utilities，雖然是 Angular 上下游的工具，但是它不限于框架。
有了這個(gè)工具，我們就可以快速修改代碼，如：
- recorder = tree.beginUpdate(path);
- recorder
- .remove(start, length)
- .insertLeft(start, value);
- tree.commitUpdate(recorder);
這些都大同小異，沒有什么特別之處。
總結(jié)
嗯，人生苦短，一定要花 1 小時(shí)寫個(gè)工具，解決 10 分鐘能完成的事情。
本文轉(zhuǎn)載自微信公眾號(hào)「phodal」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系phodal公眾號(hào)。
