Svelte 最新消息：2021 年 10 月

大家好 👋 「Svelte 最新消息」開始在 Svelte 部落格上交叉發布已經一年了。我想藉此機會感謝各位的閱讀，以及每個月的所有貢獻者。從維護者到在 Discord 和 Reddit 上發布作品的每個人，見證大家為了讓 Svelte 社群變得更好所做的努力，真的很令人驚艷。

大家繼續加油！現在，讓我們深入了解這個月的新聞...

Svelte 新動態

• Svelte 的匯出映射新增了功能，現在可以為 SSR 公開生命週期函數的無操作版本 (Svelte 3.43.0)
• 具有 src 屬性的自訂元件不再會中斷 svelte-native 建置 (Svelte 3.42.4)
• 沒有啟用TypeScript 外掛程式的 Svelte 外掛程式使用者，現在會收到啟用提示。它會透過額外的智慧感知功能來增強 TypeScript 和 JavaScript 檔案，以便與 Svelte 檔案互動。如果您正在使用它，請留下意見反應 (Svelte 擴充功能 105.4.0)
• 事件修飾符已新增至智慧感知功能，作為自動完成和懸停資訊 (Svelte 擴充功能 105.4.0)
• 當使用 Svelte 3.39 或更高版本以及 svelte-preprocess 4.9.5 或更高版本時，TypeScript 使用者不再需要嚴格區分類型匯入和值匯入。這表示您現在可以寫入 import { MyInterface, myValue } from './somewhere'，而不是 import type { MyInterface } from './somewhere'; import { myValue } from './somewhere'。非常感謝社群成員 @SomaticIT 的主要實作！

如需完整的功能和錯誤修正清單，請查看Svelte 變更日誌。

SvelteKit 更新

上個月再次提交了近 100 個 PR，但仍有許多工作要做，而且 Svelte 維護者正在尋求協助將 SvelteKit 推向 1.0 版。Antony 在關於這個問題的最近的評論中說得很好

如果您認為自己是新手而無法貢獻 (您不是)，那麼請在新增功能之前，先新增測試或撰寫您想要新增的功能的測試！從小處著手，然後透過這種方式來了解程式碼庫。

如果您想幫忙，請考慮處理任何標示為「需要協助」的 1.0 里程碑問題。

本月 SvelteKit 的重要改進包括...

• 現在允許 Service Worker 使用 $lib 別名來存取檔案 (#2326)
• Svelte 程式庫現在應該可以立即使用，而不需要任何 Vite 設定 (#2343)
• 對套件匯出欄位的改進 (#2345 和 #2327)
• [重大變更] prerender.pages 設定選項已重新命名為 prerender.entries (#2380)
• 已新增新的泛型引數，以便從 hook 中輸入 Body (#2413)
• 執行套件命令時，svelte 欄位將會新增至 package.json (#2431)
• [重大變更] load 函數的 context 參數已重新命名為 stuff (#2439)
• 已新增 entryPoint 選項，以便使用 adapter-node 建置自訂伺服器 (#2414)
• vite-plugin-svelte 改善了對 useVitePreprocess 的支援，後者使用 Vite 來自動預處理 Svelte 元件中的 TypeScript、PostCSS、Scss 等 (#173)

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

---

社群展示

應用程式與網站

• radiofrance 剛將其網站遷移至 SvelteKit
• FLAYKS 是 Félix Péault 的作品集網站，使用 SvelteKit、Sanity 和 Anime.js 製作
• hirehive 是一個候選人和職位追蹤網站
• Microsocial 是一個實驗性的點對點社群平台
• Dylan Ipsum 是一個隨機文字產生器，以 Bob Dylan 的歌詞取代 lorem ipsum
• Chip8 Svelte 是一個 CHIP-8 模擬器前端，建置於 CHIP8 TypeScript 之上

正在尋找 Svelte 專案來進行開發嗎？有興趣協助改善 Svelte 在網路上的呈現嗎？如果您想要為 Svelte Society 在 SvelteKit 中的重寫做出貢獻，請查看開放問題清單。

以 Svelte 為特色的 Podcast

• Syntax Podcast：從 React 到 SvelteKit Scott 與 Wes 討論如何將 Level Up Tutorials 從 React 移至 SvelteKit — 他為什麼這麼做、如何做、優點、需要注意的事項等等！
• Web Rush Podcast：Svelte 工具和 Svelte Society Kevin Åberg Kultalahti 談論 Svelte Society 是什麼、他對 Svelte 感興趣之處、文件對任何產品的重要性，以及更多更多內容
• Svelte：前端的編譯未來 詳細說明了基於元件的前端的歷史，以及編譯器如何改變一切
• Svelte Radio：與 Martin ‘Grygrflzr’ Krisnanto Putra 一起為 Svelte 貢獻 Grygrflzr 分享了他成為維護者的過程，以及他對 React、Vite 和其他許多事情的看法
• Svelte Radio：Routify 3 與 Jake 和 Willow Svelte Radio 的工作人員與 Routify 的維護者一起坐下來討論剛發布的 Routify 3
• JS Party：1Password 在 The Changelog 的 JS Party 最新一集中提到，他們使用 Svelte 來支援其頁面內建議

教育內容

• 我如何使用 Svelte 和 SvelteKit 建置部落格 介紹 Svelte、SvelteKit 和漸進式增強功能，並提供程式碼範例
• 我建置了一個去中心化聊天 dapp 是一個關於如何使用流行的 Web3 技術 (例如 GUN) 來建置去中心化 Web 應用程式 (dapp) 的教學課程
• 使用 TypeScript 撰寫 Svelte 儲存 深入探討如何使用 TypeScript 撰寫 Svelte 儲存
• Svelte 如何設定元件樣式的範圍 解釋如何使用類別和更複雜的 CSS 指定器來設定範圍
• SvelteKit Hooks 顯示如何在 SvelteKit 中使用 hooks.js。完成後，請查看第 2 部分
• SvelteKit 的早期觀察 是 Infoworld 的一篇貼文，逐步介紹了 SvelteKit 的功能和入門

程式庫、工具與元件

• sveltekit-netlify-cms 是一個 SvelteKit 框架應用程式，設定為與 Netlify CMS 搭配使用
• SvelteFireTS 是一個受 Fireship.io 啟發的 SvelteKit + TypeScript + Firebase 程式庫
• stores-x 可讓您像 vueX 一樣使用 Svelte 儲存
• sveltekit-snippets 是一個 VSCode 擴充功能，提供 SvelteKit 和 Vanilla Svelte 中常見模式的程式碼片段
• svelte-xactor 是一個中介軟體，可讓您輕鬆地將 xactor 機器轉換為實作儲存合約的通用儲存
• vite-plugin-pages-svelte 是一個用於自動基於檔案系統路由的 vite 外掛程式
• sveltio 是用於 valtio 的 Svelte 包裝器，valtio 是一個 Proxy 狀態程式庫
• svelte-transition-classes 是一個用於新增和交換 CSS 類別的自訂 Svelte 過渡
• Svelte-Boring-Avatars 是流行的 Boring Avatars React 專案的 Svelte 連接埠
• Svelte DataTables 將 DataTable (一個流行的 JavaScript 程式庫，可讓您輕鬆地以使用者友善的表格顯示資料) 引入您的 Svelte 專案。
• focus-svelte 是一個不含任何相依性的 Svelte 焦點陷阱
• filedrop-svelte 是一個適用於 Svelte 的檔案放置區動作和元件

從 Svelte 生態系統中查看社群網站 sveltesociety.dev 以取得更多範本、加入器和配接器。

在您離開之前，請回覆徵求講者的號召！

Svelte Summit Fall 2021 (將於 2021 年 11 月 20 日舉行) 正在尋找講者。在 10 月 30 日之前提交您的演講提案... 歡迎所有人演講和參加。

如需更多資訊，請參閱 sessionize 網站

等不及高峰會了嗎？加入我們的 Reddit 或 Discord！