小編精選 - 技術文章翻譯 · 04月19日

踩坑分享：Vite Plus 最佳實踐

寫在前面

掘金的同學們大家好呀，作者是 Varlet UI 的作者。掘金文章已經一年沒更新了，去年跳槽到了一家新創公司負責前端架構工作，寫文章這件事就一直擱置了。最近稍微緩過來了一點點（其實還是壓力很大...），但不妨礙今天來給大家分享一下我們最新的開源專案 rattail。

先聊聊 Vite Plus

上個月 VoidZero 正式以 MIT 協議開源了 Vite+，它把 Vite、Vitest、Oxlint、Oxfmt、Rolldown、tsdown 統一收攏到了同一個 vp 命令下面，一套工具鏈覆蓋 dev、build、test、lint、fmt、pack 等所有工程化環節。作者第一時間就把 varlet 周邊的專案遷移到了 Vite+ 上面試試水，遷移下來發現效果特別好。以前那些散落在各處的 eslint 配置、prettier 配置、lint-staged 配置、commitlint 配置可以統一收攏到一個 vite.config.ts 裡面，專案根目錄一下子乾淨了不少（以前打開根目錄看到十幾個 .xxxrc 檔案的日子終於結束了）。而且因為工具鏈統一了，AI Agent 在理解專案配置的時候幻覺也少了很多。

公司專案遷移

既然體驗這麼好，作者就決定把公司內部的前端專案也都遷移到 Vite+ 上。遷移的過程中也讓作者重新審視了一下 rattail，我們在 varlet 生態裡累積了大量的工具函式、請求庫、校驗規則工廠、CLI 工具鏈，之前一直是分散在各個套件裡的，正好借這次機會做一次大整合，於是就有了 rattail 2.0——一個面向 Vite+、對 AI Agent 非常友善的前端工具鏈。140+ 工具函式、漸進式請求庫、鏈式校驗規則工廠、CLI 工具鏈、型別安全枚舉，pnpm add rattail 一條命令全部拉齊。

目前作者也在公司專案中全面使用了 Vite+ + rattail 這套技術棧，體驗下來非常舒服。另外值得一提的是，這次 rattail 2.0 的遷移和開發過程中，作者大量使用了 AI 輔助編程，包括工具函式的撰寫、單元測試的補全、文件的生成等等，效率提升非常明顯。配合 rattail 提供的 Agent Skills，AI Agent 能夠很好的理解專案上下文並正確使用 rattail 的 API，整個工作流跑下來還是相當絲滑的。後續在業務開發中也明顯感覺到，因為 rattail 把工具函式、請求庫、校驗規則這些東西 all in one 了，AI 在生成程式碼的時候幻覺變得特別少，而且很會按照規範做事。

特性一覽

⚙️ 面向 Vite+ 的開箱即用設定預設
🔧 CLI 工具鏈，支援發佈、日誌、Git Hooks、Commit Lint、API 生成
🧰 140+ 工具函式，覆蓋通用、字串、數字、陣列、物件、數學等場景
🚀 基於 axios 的漸進式請求工具，支援 Vue 組合式 API
📏 鏈式校驗規則工廠，適配任意 UI 框架
🏷️ 型別安全的枚舉工具
🤖 提供 Agent Skills，幫助 AI 程式設計助手理解和使用 Rattail
🌲 可 Tree-shake，輕量，TypeScript 完整型別支援
💪 90%+ 單元測試覆蓋率

下面作者挑幾個有意思的能力展開聊聊。

Vite+ 設定預設

做過前端工程化的同學應該都有體會，每次新專案光配 eslint 和 prettier 這些東西就夠喝一壺的了，配好了還得處理各種衝突。rattail 內建了面向 Vite+ 的開箱即用預設，一個 vite.config.ts 搞定 lint、format、staged、git hooks 等所有工程化設定。

之前作者為了配這些東西寫了好幾個設定檔，現在一個檔案就夠了（少寫程式碼是第一生產力）。

CLI 工具鏈

安裝 rattail 後會註冊一個 rt 命令，覆蓋了作者日常開發中最常用的幾個場景。

# 清理產物
rt clean

# 安裝 git hooks
rt hook

# 發佈
rt release

# 生成 changelog
rt changelog

# 從 OpenAPI 生成 API 模組
rt api

這些命令都支援透過 vite.config.ts 中的 rattail 欄位進行設定，也就是說專案根目錄不需要再多出一堆 .xxxrc 檔案了。這一點作者是比較在意的，畢竟誰也不想打開專案根目錄看到十幾個設定檔吧（有些專案根目錄比 node_modules 還熱鬧）。

140+ 工具函式

lodash 大家都耳熟能詳了，rattail 裡的工具函式覆蓋的場景和 lodash 類似，包括型別判斷、陣列、物件、字串、數學、函式、集合、檔案等分類，用法就不逐個列舉了。和 lodash 不同的是，這些函式從第一天就是用 TypeScript 寫的，型別推導是第一優先級，全部可 Tree-shake。除了 lodash 風格的工具函式以外，rattail 還內建了一些前端專案中常用的實用工具，比如 sumHash 計算雜湊、uuid 生成唯一 ID、mitt 事件匯流排、duration 時間格式化、storage / cookieStorage 儲存封裝、copyText 複製文字、download 檔案下載等等，省得同學們每次都要另外裝一堆小套件。更多的可以去文件裡查看完整的 API 清單。

型別安全的枚舉工具

這個是作者個人比較喜歡的一個工具。前端專案裡到處都是枚舉值，比如訂單狀態、使用者角色之類的。一般我們用 enum 或者常量物件來管理它們，但是 label、description 這些配套資訊就只能另外維護了。enumOf 把值和它的中繼資料放在一起管理，並且型別推導是完備的。

前端專案裡到處都需要枚舉值和它對應的文案，以前每次都要寫個 map 或者 switch，現在一個 enumOf 就夠了。另外 enumOf 的 label 和 description 支援傳入一個 getter 函式，配合 vue-i18n 之類的國際化方案可以很方便地實現多語言：

基於 axios 的漸進式請求工具

這個能力來自於作者之前開源的 @varlet/axle，現在透過 rattail/axle 直接引入。熟悉作者的同學可能看過之前介紹 axle 的文章，它在相容 axios 的同時，天然支援 Vue3 Composition API。

作者一直覺得前端請求庫和 Vue 的響應式系統應該有更好的結合方式，axle 就是在這個方向上的一個嘗試。如果你不喜歡 axle 也完全沒問題，rattail 的其他能力和請求庫是解耦的，換成你喜歡的方案就好。

OpenAPI 生成 API 模組

rt api 可以直接解析後端提供的 OpenAPI / Swagger schema 檔案，自動生成型別安全的 API 呼叫程式碼，這個在實際專案裡把工作流做通之後體驗可太好了。

在 vite.config.ts 裡設定好 schema 路徑和輸出目錄：

執行 rt api 後會自動生成這樣的程式碼：

請求型別、回應型別全部從 schema 裡提取，不需要手寫。後端介面變了，重新跑一遍 rt api 就行，前後端的型別始終保持同步。這個工作流對 AI Agent 也特別友善，AI 可以直接基於生成的型別去寫業務程式碼，不會出現參數型別對不上的問題。甚至 AI Agent 可以透過 api 定義的變化，推測出你接下來要寫什麼業務。預設使用 axle，也支援 axios 的預設，同時支援 自訂輸出。

鏈式校驗規則工廠

做表單的同學應該都寫過類似 required、min、max 這些校驗規則。不同的 UI 框架校驗規則的格式還不一樣，每個專案都要適配一遍。rattail 提供了一個鏈式校驗規則工廠，寫起來很流暢，並且可以適配任意 UI 框架。這種內聯的宣告式寫法和 Tailwind CSS 的思路類似，可讀性和可遷移性都非常好，對 AI 也特別友善，AI 可以直接從模板裡讀懂校驗意圖，生成和修改規則的準確度很高。

以 Naive UI 和 Element Plus 為例：