日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
Lemonj：類CSS的自動化重構工具

最近，在幫助一家大型公司的大型前端項目設計和構建前端體系，期間和我同事 @Liuuy 討論起了 CSS 的架構和設計問題。開發(fā)人員對于 CSS 及其 CSS 預處理器的使用是一個很有意思的問題 —— 過去，我一直在吐槽這些想寫好 CSS 的人，卻是一點兒也不想高認真學習 CSS。

于是，在我們的討論之下，我借助了在編寫 Coca 的經(jīng)驗，設計和驗證了自動化重構的可能性。由我的同事完成了 TypeScript 的 CSS 自動化重構工具：Lemonj —— 名字是我取的 。

Lemonj

GitHub：https://github.com/twfe/lemonj

Lemonj 是一個面向 CSS/LESS/SCSS 的分析、壞味道檢查和自動化重構工具。

從架構上來說，它就是通過 Antlr + Antlr4TS 生成對應的解析器生成器，而后根據(jù)需要處理所需的字段對相應的內容進行標記。隨后，根據(jù)我們的需要和設計，通過 AST 中的位置信息，修改對應的內容值。

如 importants 數(shù)量分析中的代碼：

 
 
 
 
    
  
  
  
  
  1. if (Checker.hasImportant(propertyValue)) { 
    2. 
  
  
  
  
  2. if (!this.metadata.importants) { 
    3. 
  
  
  
  
  3. this.metadata.importants = []; 
    4. 
  
  
  
  
  4. } 
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6. this.metadata.importants.push({ 
    7. 
  
  
  
  
  7. type: '!important', 
    8. 
  
  
  
  
  8. file: this.metadata.filePath, 
    9. 
  
  
  
  
  9. line: ctx._start.line, 
    10. 
  
  
  
  
  10. }); 
    11. 
  
  
  
  
  11. } 
    12.

它便是獲取 CSS 屬性中的內容，檢查是否有 !important，然后記錄一下位置信息。

與 CSS 轉換器的不同之處

或許你也用過各類的 CSS/LESS/SAAS 轉換工具，所以會好奇它們與 Lemonj 的相似與不同之處在哪里。

CSS 轉 CSS 預處理器轉換工具。它們都是一鍵式的上傳一個類 CSS 文件，從中提取語法樹，轉換到新的形式上。而要實現(xiàn)不同預處理器的轉換，你可能還需要多個轉換工具。而且它們只能在一個文件上修改，而你的代碼是分散在代碼庫中。

Lemonj 自動化重構 CSS 工具。也是分析語法樹，從中提取文件的信息，但不能直接轉換到新的形式上。而是要分析出代碼中的問題，結合 AST 中獲取到的位置信息，再回到指定的文件中對它們進行自動化修改。

你可以認為一個是在現(xiàn)有的代碼基本上自動修改，一個是則是普通的轉換工具 —— 畢竟根據(jù)位置修改是一個累人的工作。

使用 Lemonj 進行 CSS 自動化重構

1.先安裝 Lemonj，即： npm install lemonj -g 又或者是： yarn global add lemonj

2.使用 Lemonj 分析下代碼： lemonj analysis _fixtures，這里的 _fixtures 是個目錄。

過程中，會生成對應的壞味道數(shù)據(jù)：

 
 
 
 
    
  
  
  
  
  1. Code Smell: { 
    2. 
  
  
  
  
  2. colors: 24, 
    3. 
  
  
  
  
  3. importants: 4, 
    4. 
  
  
  
  
  4. issues: 8, 
    5. 
  
  
  
  
  5. mediaQueries: 1, 
    6. 
  
  
  
  
  6. absolute: 0, 
    7. 
  
  
  
  
  7. oddWidth: 1 
    8. 
  
  
  
  
  8. } 
    9.

因為壞味道功能太普通了，所以我們暫時沒有增強，并非我們的核心競爭力所在。除此，在執(zhí)行 anlaysis 的時候，還會生成一些額外的信息，比如顏色的 mapping 文件：

 
 
 
 
    
  
  
  
  
  1. // _fixtures/less/color/border.less 
    2. 
  
  
  
  
  2. @color1: #ddd; 
    3. 
  
  
  
  
  3. // _fixtures/less/color/border.less 
    4. 
  
  
  
  
  4. @color2: green; 
    5. 
  
  
  
  
  5. // _fixtures/less/color/rgba.less 
    6. 
  
  
  
  
  6. @color3: rgba(255, 0, 0, 0.3); 
    7. 
  
  
  
  
  7. // _fixtures/less/color/sample.less 
    8. 
  
  
  
  
  8. @color4: #ff7f50; 
    9. 
  
  
  
  
  9. // _fixtures/less/color/sample.less 
    10. 
  
  
  
  
  10. // _fixtures/less/color/sample2.less 
    11. 
  
  
  
  
  11. @color5: #800080; 
    12. 
  
  
  
  
  12. // _fixtures/less/color/sample.less 
    13.

這里的顏色只是暫時的命名，需要根據(jù)具體的需要進行調整，如按設計系統(tǒng)的思想，將 color_1 改成 @primary_color。

3.執(zhí)行 lemonj refactor _fixtures 對代碼進行自動化重構。就能將上一步中的代碼，進一步地修改到所有的代碼文件中。

嗯，重構就是如此的簡單。

其它

Charj 的功能在完善中，歡迎大家看看你們有哪些場景適合自動化重構。

最后，記得我們的 GitHub：https://github.com/twfe/lemonj

冰河  本文轉載自微信公眾號「phodal」，可以通過以下二維碼關注。轉載本文請聯(lián)系phodal公眾號。


新聞標題：Lemonj：類CSS的自動化重構工具
URL網(wǎng)址：http://www.dlmjj.cn/article/ccesoog.html