SvelteKit 1.0 正式發佈
簡化網頁開發流程
經過兩年的開發,SvelteKit 終於達到 1.0 版本。從今天起,它是建構各種規模 Svelte 應用程式的首選方式。
我們非常興奮能與您分享這個版本。這是 Svelte 核心團隊和更廣泛的社群數千小時工作的結晶,我們認為無論您是獨自開發小型專案的開發人員,還是大型團隊的一員,這都是建構生產級網站最愉快的方式。
要開始使用,請執行 npm create svelte@latest
,並瀏覽文件和(實驗性!)互動式教學。
什麼是 SvelteKit?
SvelteKit 是一個在 Svelte 之上建構網頁應用程式的框架,Svelte 是一個 UI 元件框架,因其效能和易用性而受到開發人員喜愛。
如果您使用過像 Svelte 這樣的元件框架,您會知道它們比直接操作 DOM 更容易建構使用者介面。但它們遺留了很多未解答的問題
- 我該如何組織我的原始碼?
- 我該如何新增伺服器端渲染?
- 我該如何新增在伺服器和瀏覽器上都能運作的路由?
- 我該如何使用戶端路由具有可訪問性?
- 我該如何擷取資料?
- 我該如何變更資料?
- 我該如何處理錯誤?
- 我該如何最佳化我的生產版本?
- 我該如何明智且安全地處理環境變數?
- 我該如何新增 CSP 標頭和 CSRF 保護?
- 我該如何新增一個知道要快取哪些內容的 Service Worker?
- 我該如何為部署準備我的應用程式?
應用程式框架旨在回答這些問題。SvelteKit 的設計基於大量 Beta 測試人員的實際需求(他們中的許多人已經在生產環境中運行 SvelteKit 一段時間了 — 我們向你們的勇氣致敬,並感謝你們寶貴的回饋),以及其他應用程式框架的最佳想法,包括 Next.js 和 Remix。
它有什麼不同?
現今的網頁開發人員有很多選擇。除了上述框架之外,還有像 Astro 這樣的選擇,經過考驗的伺服器框架如 Rails 和 Laravel,以及數百萬個靜態網站產生器。這些都是很棒的工具,您可以放心地選擇它們。
然而,SvelteKit 的做法略有不同
與傳統的「多頁應用程式」或 MPA 框架不同,它在初始伺服器渲染頁面載入後,預設為用戶端導航。這可以加快頁面轉換速度、在頁面之間持續存在的狀態(例如側邊欄的捲動位置)並減少資料使用量。它還可以避免在每次頁面載入時重新執行第三方腳本,例如分析。
與傳統的伺服器框架不同,它允許您使用一種語言,而不是有效地擁有兩個緊密耦合的應用程式(一個用於產生 HTML,一個用於處理用戶端互動)。由於 SvelteKit 在任何可以執行 JavaScript 的地方運行,您可以將您的應用程式部署為傳統的 Node 伺服器,或使用無伺服器函數 — 包括在邊緣。
與靜態網站產生器不同,您可以建構具有個人化或動態資料的應用程式 — 而不會在頁面載入後從瀏覽器擷取資料,造成效能下降和佈局偏移的效果。
使用 SvelteKit,您擁有靈活性。許多框架假設有一種正確的建構應用程式的方式,但現實情況更加細微。例如,預先渲染靜態頁面不僅僅是貧乏的 cache-control
— 它還可以讓您執行建構時驗證或從邊緣函數無法存取的文件系統渲染資料,並作為防止資料庫不穩定的保障。並非所有內容都需要伺服器端渲染 — 如果您想要具有良好 SEO 的穩健、高效能應用程式,這是正確的預設值,但也有無數例外情況。
在 SvelteKit 應用程式中,您可以根據需要進行這些選擇 — 例如您正在查看的頁面是預先渲染的,但 REPL 是使用動態資料渲染的。在這兩者之間切換只需一行程式碼。我們將以這種方法建構的應用程式稱為「過渡應用程式」。
我可以在 SvelteKit 中使用什麼?
由於 SvelteKit 使用 Vite 這個極速建構工具,它具有對熱模組重新載入、TypeScript 以及開發人員依賴的許多其他功能的開箱即用支援。您可以從龐大的 Vite 和 Rollup 生態系統安裝外掛程式,以新增對其他工具的支援。
在建立 SvelteKit 專案時,系統會詢問您是否要新增 TypeScript、ESLint、Prettier、Playwright(用於端對端瀏覽器測試)和 Vitest(用於單元測試)。許多熱門專案已經存在整合指南 — 例如 Tailwind 和 Supabase。您可以使用 Storybook 和 Histoire 來建立您的元件故事。社群維護的 svelte-add 讓您可以使用單一命令新增越來越多的其他整合。
當然,您也可以存取 npm 提供的所有內容。(請注意,某些套件需要 Node.js,因此只能在部署到基於 Node 的平台上時使用。)
我可以在哪裡部署我的應用程式?
任何地方!SvelteKit CLI 需要在本機安裝 Node.js,但框架本身不依賴於任何平台。這表示您可以將其部署在任何可以執行 JavaScript 的地方。
這透過適配器實現。預設適配器 adapter-auto 為 Vercel、Netlify、Cloudflare Pages 和 Azure Static Web Apps 提供零設定支援,未來將有更多平台加入。社群提供的適配器為 Deno、Bun、Firebase、App Engine、AWS Lambda 和許多其他平台新增支援。
您也可以使用 adapter-node 將您的應用程式部署為 Node.js 伺服器。
如果您的整個應用程式適合預先渲染,或是單頁應用程式 (SPA),您可以使用 adapter-static — 將 SvelteKit 轉換為靜態網站產生器 — 與任何網頁伺服器(包括 GitHub Pages)一起使用。
致謝
此版本的發佈歸功於許多人的辛勤工作。首先,我們要感謝 Svelte 社群,他們富有洞察力的回饋和無數大小貢獻將這個專案塑造為我們真正引以為傲並與更廣泛的網頁開發人員社群分享的成果。
我們也感謝 Svelte Society 和社群大使,他們透過諸如 Svelte Summit 和 Svelte Sirens 等計畫,為 Svelte 開發人員創建了一個熱情且友好的空間,無論是在線上還是線下。
有太多的內容創作者無法一一列舉,但感謝每一位發布課程並製作有關 SvelteKit 的教育內容的人。
早在 2021 年初,當我們採用 Vite 時,我們是第一個這樣做的主要應用程式框架。當時這是一個冒險的賭注,但我們對這個賭注的回報感到非常興奮。Vite 已成長為 JavaScript 世界中不可阻擋的力量,Vite 團隊一直是出色且寬容的合作夥伴。
我們得到了 Vercel、Netlify 和 Cloudflare 團隊的大力支持,使這些平台能夠實現零設定部署。
我們在 StackBlitz 的朋友們竭盡全力地讓 learn.svelte.dev,我們首創的WebContainer 驅動的互動式教學成為現實。
最後,如果沒有專案的財務支持者,這一切都不可能發生。這包括 Open Collective 上的數百位支持者,以及 Vercel,他們聘請了兩位核心開發人員(Rich 和 Simon)全職從事 Svelte 的工作,並以許多其他方式支持該專案,例如 Steph 的 Beginner SvelteKit 課程。
遷移
如果您有使用 SvelteKit 預發布版本建構的應用程式,我們建議您先升級到最終預發布版本 — @sveltejs/kit@1.0.0-next.588
— 然後再升級到 1.0,因為穩定版本移除了用於在預發布版本之間遷移的錯誤和警告。我們也建議您參考此遷移指南,尤其是如果您目前使用的是比 1.0.0-next-406 更舊的版本。
接下來是什麼?
SvelteKit 1.0 是開始,而不是結束。它今天已可供生產使用,但我們才剛開始。我們的路線圖包括內建 i18n 支援、增量靜態再生、對部署區域和運行時的精細控制、影像最佳化以及許多其他改進。明年我們也將開始開發 Svelte 4 — 稍後將會提供更多資訊。
但不要讓我們有最後的發言權。Svelte 是一個社群專案,我們許多最好的想法並非完全來自我們 — 它們來自您。在 Twitter 和 YouTube 上訂閱 Svelte Society 以隨時了解最新資訊,並加入我們的 Discord 伺服器和 GitHub 來回饋您的貢獻。
我們迫不及待想看看您們將建構什麼。