前言

掘金小伙伴們大家好sketch文件怎么降級，我是 Vue3 移動端組件庫 UI 的作者。時(shí)間過得真快，轉(zhuǎn)眼間已經(jīng)是 2023 年 10 月了。上一次整理分享組件庫的架構(gòu)還是在兩年前剛開源的時(shí)候。感謝社區(qū)同學(xué)的幫助，兩年過去了，它已經(jīng)有了 4000+ star。

兩年前筆者曾寫過一篇《如何從 0 到 1 開發(fā)一個(gè)開源組件庫》的文章，希望能夠分享和記錄組件庫從 0 到 1 的經(jīng)驗(yàn)和思考，也希望對組件庫感興趣的社區(qū)少走一些彎路。然而時(shí)至今日，前端生態(tài)已經(jīng)發(fā)生了翻天覆地的變化，自己也在不斷學(xué)習(xí)和追趕，也取得了長足的進(jìn)步。在這篇文章中，筆者將以一個(gè)組件庫作者的角度，分享當(dāng)下組件庫在架構(gòu)和思路上的變化。

Pnpm 解包架構(gòu)

這樣做的好處是可以將項(xiàng)目中公用的部分抽取成單獨(dú)的包進(jìn)行單獨(dú)發(fā)布和管理，免除了很多依賴的維護(hù)壓力。有利于組件庫的生態(tài)建設(shè)。我們在項(xiàng)目初期就采用了這種架構(gòu)，采用的是yarn+lerna的方式。后來pnpm流行起來，我們很快切換到了pnpm。pnpm性能更好，更節(jié)省磁盤空間，對依賴的處理也更好，有效解決了ghost依賴對整體項(xiàng)目的影響。

當(dāng)前解包結(jié)構(gòu)如下...

|-- packages
  |-- varlet-cli 組件庫命令行工具，管理整個(gè)組件庫的生命周期
  |-- varlet-eslint-config 組件庫的 eslint 規(guī)則
  |-- varlet-icons 組件庫圖標(biāo)庫打包工具
  |-- varlet-shared 共享的通用工具
  |-- varlet-touch-emulator 桌面端適配器
  |-- varlet-ui 組件庫本體
  |-- varlet-ui-playground 組件庫的演練場，在線編輯工具
  |-- varlet-use 組件庫用到的 composition api
  |-- varlet-vite-plugins 組件庫依賴的 vite 插件
  |-- varlet-vscode-extension 為了提高開發(fā)體驗(yàn)的 vscode 插件

設(shè)計(jì)系統(tǒng)

設(shè)計(jì)體系和設(shè)計(jì)資源對于組件庫來說非常重要，也是設(shè)計(jì)師和軟件開發(fā)者溝通的橋梁。沒有設(shè)計(jì)體系，我們的組件就會失去標(biāo)準(zhǔn)和原則，會失去一致性，最終的視覺效果也會大打折扣。沒有設(shè)計(jì)資源，設(shè)計(jì)師就很難配合軟件開發(fā)者有效制作軟件設(shè)計(jì)稿，組件庫也很難真正落地到產(chǎn)品中。

條件允許的情況下，建議先完成設(shè)計(jì)稿再實(shí)施組件。我們最初是先完成組件功能，再補(bǔ)充設(shè)計(jì)資源，損失很大。后期又花費(fèi)精力分別修改所有組件的視覺效果，費(fèi)時(shí)費(fèi)力，還產(chǎn)生了一些破壞性的變化，實(shí)在不值得。

而且學(xué)生們也不需要害怕畫設(shè)計(jì)圖，像Figma這樣的工具很符合我們做前端開發(fā)的慣性思維，而且非常好用。

image.png組件書寫風(fēng)格 SFC 或 TSX

我們采用了 SFC 與 TSX 互補(bǔ)使用的組件編寫風(fēng)格，主要使用 SFC 是因?yàn)?Vue 的 SFC 編譯器提供了很多編譯時(shí)優(yōu)化和運(yùn)行時(shí)更佳的性能。而使用 TSX 則是為了彌補(bǔ) SFC 的一些開發(fā)短板（比如對于 VNode 的操作，SFC 就不如 TSX 方便）sketch文件怎么降級，兩者各取所長。

開發(fā)環(huán)境擁抱Vite生態(tài)

我們的開發(fā)環(huán)境已經(jīng)遷移到 Vite，項(xiàng)目所需的 Vite 插件也已經(jīng)分離成一個(gè)包。Vite 非常優(yōu)秀，功能強(qiáng)大，既可以作為開發(fā)服務(wù)器，又可以作為庫編譯器，是自建組件庫文檔的最佳選擇。同時(shí)我們也非常期待 Vite 之后可能出現(xiàn)的基于 Rust 的構(gòu)建工具?？傊?，Vite 是一個(gè)充滿可能性的技術(shù)，值得擁抱它。

圖標(biāo)庫

我們采用的方案是傳統(tǒng)的字體圖標(biāo)方案，使用起來非常方便，我們使用-icons將svg圖片集打包成字體文件和css，以供組件庫使用。

單元測試

我們的單元測試工具已經(jīng)從 jest 遷移到 。jest 一個(gè)眾所周知的問題是配置文件太多，需要單獨(dú)配置編譯相關(guān)的東西。其實(shí) Vite 已經(jīng)幫我們處理好了這些東西。 最大的好處就是和 Vite 共享配置，可以減少很多依賴和配置維護(hù)負(fù)擔(dān)。

測試文件的執(zhí)行速度也得到了很大的提升，尤其是在 Mac M1 上。不過在單核 CPU 上顯然沒有那么快，在 CI 上的速度和 jest 差不多，還是值得遷移到 。

image.png基于原生語言的JS/TS編譯器

隨著基于原生語言的 JS/TS 編譯器的流行，社區(qū)中也涌現(xiàn)出了很多基于原生語言編譯器的上游工具供我們替換一些老舊的工具。針對瀏覽器場景下 TS 庫的編譯器，我們選擇使用 tsup 來替換官方的編譯器 tsc。tsup 基于 ，編譯速度是 tsc 的數(shù)倍，開箱即用。

Node 場景我們推薦使用 ts 庫，它在開發(fā)模式下提供了運(yùn)行時(shí)，可以避免重復(fù)編譯 watch 文件的性能開銷，也支持生產(chǎn)環(huán)境的搭建。我們最后沒有用它，因?yàn)槲覀儾幌Ｍ?xiàng)目中的編譯器太復(fù)雜，而且 Node 場景的 ts 庫對我們來說也不多，最終選擇了 tsup 來編譯除組件編譯之外所有場景的庫。

我們通過自研的編譯器來編譯組件，自研編譯器的好處是編譯過程足夠可控和直接，并且輕量級。編譯核心也從 babel 過渡到了 babel+混合編譯，使用 babel 來處理 vue jsx 語法，然后再進(jìn)行編譯和語法降級，大大加快了編譯速度。

image.png 編譯結(jié)果

為了滿足不同場景的需求，我們一般需要這幾個(gè)產(chǎn)品：esm、cjs、umd。esm一般用在構(gòu)建工具的場景，cjs一般用在老node版本的服務(wù)端渲染、單元測試的場景，umd一般用在瀏覽器cdn引入的場景。我們使用自研的組件編譯器，按照目錄結(jié)構(gòu)輸出esm模塊。按照目錄結(jié)構(gòu)輸出對組件的按需引入更加友好，然后通過Vite的庫編譯模式輸出cjs、umd的打包文件。

文檔部署

本著能不花錢就不花錢的原則，國內(nèi)首選Gitee Pages服務(wù)，國外首選Gitee Pages服務(wù)。部署兩個(gè)站點(diǎn)有利于國內(nèi)外用戶的訪問體驗(yàn)。還有一個(gè)好處就是可以通過APP直接集成到CI中，每個(gè)PR都可以自動部署，并且得到一個(gè)可訪問的地址，這樣可以幫助你清晰的預(yù)覽和了解每次提交對應(yīng)的組件效果，畢竟我們是做組件庫，視覺效果的審核極其重要。

圖片.png

image.png鉆地

每個(gè)組件庫都需要一個(gè)在線編輯工具，方便用戶反饋、重現(xiàn) Bug 或者提出問題。我們修改了 Vue 官方代碼，搭建了一個(gè)。具體實(shí)現(xiàn)細(xì)節(jié)，可以查看這篇文章 Vue3 組件在線交互式解釋器，或者查看源碼。也可以使用一些成熟的服務(wù)，比如，但它們都不是那么輕量，在線搭建也比較耗時(shí)，國內(nèi)網(wǎng)絡(luò)不好的同學(xué)很難訪問。

圖像.插件

組件庫不僅要滿足用戶體驗(yàn)，還要盡可能滿足開發(fā)者體驗(yàn)。插件是一個(gè)很好的起點(diǎn)。我們嘗試開發(fā)了一個(gè)插件。功能如下

圖片.png

圖片.png

順便說一下，我們還做了一個(gè)主題

圖片.png

該插件可以在插件市場中找到

image.png感謝您閱讀本文

我不知道自己寫得怎么樣，可能幫不了你什么，但希望能給你一些啟發(fā)。再次感謝社區(qū)對組件庫的支持，歡迎大家issue pr star。

倉庫地址：

如有侵權(quán)請聯(lián)系刪除！