使用 Svelte 創建獨立小部件：我的旅程和解決方案

在過去的幾個月裡 在過去的幾個月裡，我的任務是確定如何為我的全職工作編寫和管理獨立的小部件。雖然確保它們正常運作相對簡單，但我很快就意識到維護它們完全是一個不同的挑戰

考慮到這一點，我在業餘時間開始了一個業餘專案並將其開源。這使我能夠分享我的見解和幫助我確保小部件品質的策略。

我最初是怎麼做的？

由於我的小部件需要高水準的反應性，因此我嚴重依賴 Svelte 元件 API 並使用 Rollup 進行捆綁。 「這很簡單直接，直到我遇到了以下問題：

• 我未使用的 CSS 不斷增加，我也不確定是否只捆綁了所需組件的 CSS。

• 如果沒有嚴格的輸入，很難透過小部件處理 JavaScript。由於我不得不分享一些像 jwt 解碼和身份驗證這樣的實用程序，它很快就變得一團糟。

我怎麼改的呢？

我開始考慮如何建立一些預設值，更重要的是，整合一個類型系統。這導致了我的副業專案 svelte-standalone 的創建。

svelte-standalone 的目標是：

• 確保充分縮小 CSS 並在捆綁時刪除未使用的 CSS。
• 確保選擇的類型系統在我的所有應用程式上都得到良好支援和重複使用。

注意：選擇的類型系統是 TypeScript。

• 確保單元和整合測試。
• 確保我可以在匯總解析之前和之後直觀地檢查我的小部件。

我是如何實現這一切的？

在確保 TypeScript 與 Rollup 插件和 Svelte 預處理器的兼容性之後，我退後一步，將我的專案分解為關鍵步驟。基本上我有：

1. A .svelte.
2. 一個 embed.js 文件，負責啟動 .svelte 文件的實例並將其添加到正文中。

從那時起，我注意到我的嵌入文件基本上是在我的所有小部件上複製的預設文件，並開始生成它們。因此，我能夠使用 codegen 工具根據我的精簡文件和我在整個應用程式中處理類型的願望生成 3 個文件：

1. declaration.d.ts - 讓我可以直接匯入我的 svelte 元件並使用 SvelteComponent 類型包裝它，因此我預設將我的 svelte 元件轉為強型別。
2. types.ts - 使我可以根據declaration.d.ts 聲明的 props 編寫 defaultConfig。
3. embed.ts - 以標準方式為我的所有小部件啟用我的組件的啟動/停止！

瞧！這種方法解決了我的類型系統問題，並提高了我的小部件的可維護性。

我該如何應對 CSS 挑戰：

我面臨的與 CSS 相關的主要挑戰是：如何輕鬆清除和縮小 CSS？如何撰寫既易於協作又易於整合到不同環境中的 CSS？

解決方案非常簡單：只要使用 Tailwind CSS。

透過這個方法，我發現了以下好處：

• 不再有衝突的樣式：使用 Tailwind 讓我不再擔心樣式衝突。例如，在處理嚴重依賴 Bootstrap 的遺留應用程式時，我只需向我的小部件應用一個前綴和一個重要標誌，衝突就解決了。

• 無縫整合：將我的小部件導入另一個 Tailwind 應用程式時，我可以輕鬆省略某些 Tailwind 指令以減小我的包大小。

• 輕鬆的清除和縮小：縮小變得簡單，使用 Tailwind 的內建 PurgeCSS，我只需要為每個小部件正確配置內容標誌即可。這確保了最終捆綁包中只包含必要的樣式。

我如何解決測試問題？

我在確保對我的小部件進行全面測試方面面臨挑戰，包括單元測試、整合測試和視覺化測試。

我的主要目標是在使用 Rollup 處理元件之前和之後來視覺化它們。為了實現這個目標，我採取了以下步驟：

• 嚴格類型故事書：我根據我的declaration.d.ts 和 types.ts 檔案實現了嚴格類型故事書。這使得自動為我的每個小部件產生預設故事變得很方便。

• Vite 整合：我使用 Vite 在 Svelte 路由上載入捆綁的元件。基於我的 TypeScript 檔案產生預設路由元件也很方便。

僅此而已！我衷心感謝一些回饋！另外，請查看 svelte-standalone。

無論您有疑問、建議還是疑慮，請隨時與我聯絡！

以上是使用 Svelte 創建獨立小部件：我的旅程和解決方案的詳細內容。更多資訊請關注PHP中文網其他相關文章！