Svelte 最新消息：2021 年 2 月

整合和改進速度快如閃電...

Dani Sandoval 2021 年 2 月 1 日

在一年中最短的月份即將到來之際，Svelte 的維護者和社群成員們在上個月都非常忙碌 – 從 svelte-loader、prettier-plugin-svelte、rollup-plugin-svelte 和 language-tools 的重大變更，到 Sapper 和 svelte-preprocess 的穩定進展。同時，許多人也忙於將 Svelte 與其他流行的框架整合。

新的編譯器功能

來自 WAI-ARIA Graphics Module 的 Aria 角色現在被 Svelte 組件識別為有效的 aria 角色 (3.31.1)
常見的 React 屬性 className 和 htmlFor 的編譯器警告，現在可以更輕鬆地將 React 組件移植到 Svelte (3.31.1)

對於編譯器功能有任何建議，或想要協助實作新功能/錯誤修復嗎？請查看 Svelte 的「triage: good first issue」標籤

language-tools 中的新功能

使用者停用的自動導入建議不再顯示在 VS Code 中 (103.0.0)
重新命名變數現在更安全，可以智慧地在重新命名的變數中加入前綴/後綴 (104.0.0)
TypeScript 使用者的語意 (標記) 醒目提示，可讓主題製作者在其主題中套用語意樣式 (如果他們支援的話) (104.0.0)
「提取元件」已新增至內容選單 – 讓您可以從檔案中提取元件，而無需打開命令視窗輸入「Svelte: Extract Component」(104.0.0)
VS Code 擴充功能現在會偵聽 JavaScript/TypeScript 檔案變更 – 您不再需要儲存檔案才能注意到變更 (104.1.0)

如需完整的變更清單，請查看 language-tools 發佈頁面。

嘗試 language-tools 的絕佳方式是下載適用於 VSCode 的 Svelte 擴充功能。這個擴充功能使用 svelte 語言伺服器，為 VS Code 中的 Svelte 組件提供語法醒目提示和豐富的智慧感知。請檢查編輯器的擴充功能來源，看看是否有適用於您的 IDE 的 Svelte 外掛程式，或者自行建立一個 (例如，請參閱 coc-svelte)！

Svelte 生態系統的重大改進

svelte-loader 發佈了主要版本 3.0.0 – 具有 Webpack 5 和 Node 14 支援、更好的熱重載，以及與 rollup-plugin-svelte 相符的新 compilerOptions。重大變更包括捨棄 Svelte 2 和 Node 8 的支援。變更記錄中有更多資訊
rollup-plugin-svelte 現在是 7.x 版 – 支援相對檔案名稱、更好地處理來源對應，以及一致的 compilerOptions。升級時，請務必查看變更記錄以了解重大變更
svelte-preprocess 本月反覆更新了幾個 4.6.x 版本，以改善 postcss 和 scss 的處理方式，並修正 typescript 使用者的來源對應轉換。變更記錄中有更多資訊
Sapper 在捲動追蹤和處理編碼查詢參數方面獲得了一些改進。動態導入現在也可以在不支援 ES 模組的瀏覽器中如預期運作。這些來自 0.29.0 的變更和逐步移轉指南可以在變更記錄中找到
prettier-plugin-svelte 發佈了版本 2。它進行了徹底修改，並重新編寫了 HTML 格式。現在的輸出與標準 Prettier 格式化 HTML 的方式更加一致。svelteBracketNewLine 和 options-scripts-markup-styles 的更好預設值現在應與大多數使用者喜歡的程式碼區塊順序一致。此外，現在支援 Prettier 的 htmlWhitespaceSensitivity 設定。變更記錄中有更多資訊

Svelte Society 網站的新變更包括一份新的速查表，可輕鬆存取有用的程式碼模式，以及整個網站的一些較小的視覺修正。想協助讓 Svelte Society 網站為黃金時段做好準備嗎？查看 GitHub 存放庫以開始使用！

社群展示

應用程式與網站

德國官方疫苗接種儀表板追蹤目前的 COVID 疫苗接種情況，並提供一些精美的資料視覺化效果。
La neuva era de la educatión conectada 是 Vodaphone 網站，重點介紹技術和 COVID-19 如何改變教育環境
sho.rest 是一個可自行託管的網址縮短器
night.fm 是一個以賽博龐克為主題的廣播電台

示範、程式庫與元件

Svelte Reactive Debugger 是一種在 Firefox 開發人員工具中監控 Svelte 反應式陳述式的方法
svelte-actions 是一組原型 Svelte 動作，用於未來納入官方動作中。請參閱 RFC 和討論高階原則。
由 @joja (在 Svelte Discord 中) 製作的這個 CSS 格線藝廊具有基於使用者滑鼠位置的格線轉換
Patchcab 是一個使用 Web Audio 製作的模組化 Eurorack 風格合成器。
svelte-knob 是一個旋鈕控制項，可協助進行速度計風格的視覺化
descent-ripple 是一個高度可自訂的 javascript 按鈕漣漪動畫
makeItSnow 是由 @MrPoule (在 Svelte Discord 中) 製作的 Svelte 動作，可用於將 ❄️雪花❄️ 新增至任何元件 (示範)
svelte-video-player 是一個可自訂的 VideoPlayer 元件
svelte-readonly 是一個非常小的 store，僅公開可讀取的介面。

新的整合與入門套件

svelte-derver-starter 是一個入門套件，用於建立基於 Svelte 的用戶端和由 Derver 提供支援的伺服器端的完整堆疊應用程式。
eleventy-plugin-embed-svelte 可以輕鬆地將 Svelte 元件嵌入 11ty 網站中。
svelte-tailwind-extension-boilerplate 是使用 JavaScript 或 TypeScript、用於前端的 Svelte、用於樣式的 Tailwind CSS、用於測試的 Jest 和作為建置系統的 Rollup 的 Chrome 擴充功能的良好基礎。
snowpack-ui 可讓您從瀏覽器而非終端機執行和管理 Snowpack 專案
適用於 Appwrite 的 Svelte 說明如何與 Appwrite (一個自行託管的 Firebase 替代方案) 整合 GitHub 存放庫
here-maps-svelte 可以輕鬆地在 Svelte 應用程式中包含 HERE 地圖
p5-svelte 是一種將創意編碼/草圖工具 p5 放入專案的絕對簡單方法
svelte-windicss-preprocess 是一個 Svelte 前處理器，可在建置時根據 windicss 編譯器編譯 tailwindcss
MitzaCoder/svelte-boilerplate 提供 TypeScript、TailwindCSS、IE11 相容性 (使用 Babel) 和延遲載入模組的組態。

想要與全世界分享您的 Svelte 元件嗎？將您自己的元件提交到 Svelte Society 網站上的套件清單中。

學習資源

lihautan 的 Svelte Actions 播放清單教導動作的運作方式，以及它們如何協助解決開發 Svelte 應用程式時的常見問題
從 dev.to API 一鍵產生作品集/個人部落格逐步說明如何建立一個 Sapper 網站，該網站也會使用 API 從 DEV.to 擷取您的文章
如何編寫 VSCode 擴充功能以 Svelte 作為在 VSCode 中呈現自訂 UI 的方式
這個關於 Plenti 的 YouTube 系列詳細介紹了新的靜態網站產生器

下個月見！

想要將您的作品新增至展示區嗎？想要為 Svelte 做出貢獻嗎？請查看 Svelte Society、Reddit 和 Discord 以參與其中！