跳至主要內容

Svelte 最新消息：2021 年 11 月

超過 5000 個星星點亮展示

Dani Sandoval

隨著 SvelteKit 達到 80% 完成的里程碑，在 GitHub 上獲得超過 5000 個星星，並且現在的使用量比 Sapper 還多，現在絕對是嘗試它的最佳時機！社群中有許多人已經嘗試過了，這個月有非常多的展示...

此外，不要錯過 11 月 20 日的 Svelte Summit，屆時將有來自世界各地的講者。密切注意您所在地區的觀看派對 👀

現在來看看最新的內容！

Svelte 和 SvelteKit 的新功能

  • svelte.dev 現在與 sveltesociety.dev 一起在 SvelteKit 上運行。svelte.dev 是一個相對複雜的網站，具有即時程式碼編輯、身份驗證和基於 Markdown 的部落格，這讓我們能夠真正測試 SvelteKit
  • 一個新的編譯器選項 enableSourcemap，為 JS 和 CSS 原始碼對應提供更多對編譯器輸出的控制 (3.44.0)。有了這個新功能，SvelteKit 和 Vite Svelte 外掛現在可以正確處理 .svelte 模板中的環境變數 (請參閱 sveltejs/kit#720 和 sveltejs/vite-plugin-svelte#201)
  • Svelte Language Tools 現在支援讀取 VS Code CSS 設定的配置 (#1219)
  • vite-plugin-svelte 新增了一個 experimental.prebundleSvelteLibraries 選項，可以更快地載入具有許多元件的 Svelte 函式庫，例如圖示函式庫和 UI 框架。該選項可以在 svelte.config.js 的根目錄中設定。請測試一下並給我們回饋！
  • SvelteKit 只會路由客戶端上的端點，除非標記為 rel="external" - 這可以減少客戶端 JS 的大小，並使未來更容易重構路由器 (2656)
  • SvelteKit 不再支援 Node 12 (2604)
  • SvelteKit 已從 Vite 2.6.0 升級到 Vite 2.6.12，修復了 Vite 會損壞 Svelte 執行階段的問題 (https://github.com/vitejs/vite/issues/4306)。它還包含 SvelteKit 團隊的兩項修復，以避免或更容易診斷 SvelteKit 模板中的 Vite 問題 (https://github.com/vitejs/vite/pull/5192 和 https://github.com/vitejs/vite/pull/5193)。Vite 2.7 目前以 Beta 版提供，並針對 SSR 進行了額外的修復

若要查看 Svelte 和 SvelteKit 的所有更新，請分別查看 Svelte 和 SvelteKit 的變更日誌。

社群展示

應用程式與網站

  • Tangent 是一款適用於 Mac 和 Windows 的簡潔且功能強大的筆記應用程式
  • The Pudding 是一個數位出版品，以視覺文章解釋文化中辯論的想法 - 使用 SvelteKit 重建
  • Power Switcher 是瑞士電力供應發展的互動式概述，因為能源來源正在轉移到更清潔的來源
  • Sublive 是一種透過低延遲和高品質的音訊網路連接世界各地音樂家的新型音樂製作方式
  • Vibify 可幫助您使用 Spotify 聆聽歷史記錄在音樂中找到隱藏的播放清單
  • 依年份瀏覽 Marvel Unlimited 是一個 SvelteKit 網站，用於查看 Marvel Unlimited 上特定年份可用的漫畫
  • 適用於 Windows 的現代檔案總管 Files，有一個使用 SvelteKit 重建的新網站
  • lil-hash 是一個簡單的 URL 縮短器，可以產生容易記住且易於說出的縮短 URL
  • PWA Haven 是小型、快速、簡單的 PWA 的集合，用於取代原生作業系統應用程式
  • DottoBit 是一個具有內建 URL 分享功能的多色 16 位元繪圖程式
  • Former Fast Document for Print 是一個發票產生器，具有精美的設計、支援國際語言和自動計算功能
  • Helvetikon 是瑞士德語的社群維護字典
  • Palitra App 是一個基於搜尋的調色板產生器

以 Svelte 為主題的 Podcast

  • Svelte Radio 深入探討最近發布的 Svelte Summit 網站背後的技術以及其他一些有趣的東西！
  • PodRocket，LogRocket 的 podcast，與 Rich Harris 談論 Svelte
  • PodRocket 也深入探討了 Nick Reese 的 Elder.js
  • Web Rush 和 Rich Harris 談論 SPA 和 MPA 之間的差異、伺服器端渲染所扮演的角色、什麼是客戶端水合以及用於開發 SPA 或 MPA 的現代工具的現狀
  • devtools.fm 與 Rich Harris 談論開發引人入勝的資料視覺化和建構未來的工具

教育內容

函式庫、工具與元件

  • svelte-adapter-azure-swa 是 Svelte 應用程式的適配器，使用 Azure 函數建立 Azure Static Web App 以進行動態伺服器端渲染
  • Inlang 是一個本地化和國際化工具組，現在支援 SvelteKit
  • svelte-translate-tools 在建置時提取/產生/編譯 Svelte 應用程式的翻譯檔案
  • @egjs/svelte-infinitegrid 可讓您實作由不同卡片元素組成的各種格線，這些元素的尺寸各不相同
  • svelte-reactive-css-preprocess 可讓您在元件狀態變更時更容易更新 CSS 變數值
  • Sveltegen 是一個 CLI，用於簡單且輕鬆地建立動作、元件和路由
  • svelte-advanced-multistep-form 可協助包裝表單元素，將樣式傳遞給要渲染的元件，此外，它還以有序且時尚的方式呈現每個表單步驟
  • gQuery 是適用於 SvelteKit 的 GraphQL Fetcher 和快取
  • date-picker-svelte 是適用於 Svelte 的日期和時間選擇器
  • TwelveUI 是一個內建無障礙功能的 Svelte 元件函式庫
  • svelte-outclick 是一個 Svelte 元件，可讓您透過提供 outclick 事件來監聽元素外部的點擊
  • svelte-zero-api 可讓您像客戶端函數一樣使用 SvelteKit API，並支援 TypeScript
  • svelte-recaptcha-v2 是適用於 Svelte SPA、SSR 和 sveltekit 靜態網站的 Google reCAPTCHA v2 實作。
  • Svelte Body 可讓您在路由中將樣式套用至主體 - 旨在與 SvelteKit 和 Routify 搭配使用。
  • svelte-debug-console 是適用於 Svelte SPA、SSR 和 sveltekit 靜態網站的 debug.js 實作，可讓您在瀏覽器中看到您的偵錯陳述式。
  • SVEO 是一種無依賴的方法，用於在 SvelteKit 頁面上宣告元資料
  • @svelte-drama/suspense 是一個 Svelte 元件，實作了 React 的 <Suspense> 的核心概念。也可以查看 適用於 Svelte 的 SWR，讓重新提取更容易。
  • sveltekit-adapter-browser-extension 是 SvelteKit 的適配器，可將您的應用程式轉換為跨平台瀏覽器擴充功能

請查看社群網站 sveltesociety.dev，以取得來自整個 Svelte 生態系統的更多工具、範本、新增程式和適配器。

想要獲得更多 Svelte 的好處嗎？請在 Reddit 或 Discord 上加入我們！