跳至主要内容

宣布 SvelteKit 1.0 正式发布

简化 Web 开发

经过两年的开发,SvelteKit 最终达到 1.0 版本。从今天起,它是构建各种规模的 Svelte 应用程序的推荐方式。

我们非常高兴能与大家分享此版本。它是 Svelte 核心团队和更广泛社区数千小时工作的结晶,我们认为它是构建生产级网站最便捷的方式,无论您是从事小型项目的独立开发者还是大型团队的一员。

要开始使用,请运行 npm create svelte@latest,并访问文档和(实验性!)交互式教程

Svelte Radio 直播:圣诞特别节目

什么是 SvelteKit?

SvelteKit 是一个用于在 Svelte(一个 UI 组件框架)之上构建 Web 应用程序的框架, 受到开发者 喜爱,因为它性能出色且易于使用。

如果您使用过像 Svelte 这样的组件框架,您就会知道,与直接操作 DOM 相比,它们使构建用户界面变得容易得多。但它们留下了许多未解决的问题。

  • 如何组织我的源代码?
  • 如何添加服务器端渲染?
  • 如何添加在服务器和浏览器上都能正常工作的路由?
  • 如何使客户端路由可访问?
  • 如何获取数据?
  • 如何修改数据?
  • 如何处理错误?
  • 如何优化我的生产构建?
  • 如何明智且安全地处理环境变量?
  • 如何添加 CSP 标头和 CSRF 防护?
  • 如何添加一个知道要缓存什么的 Service Worker?
  • 如何准备我的应用程序以进行部署?

应用程序框架旨在回答这些问题。SvelteKit 通过一个设计来做到这一点,该设计借鉴了大量 Beta 测试人员的实际需求(其中许多人在一段时间内一直在生产环境中运行 SvelteKit——我们向你们的勇气致敬,并感谢你们提供的宝贵反馈)以及其他应用程序框架(包括 Next.jsRemix)的最佳理念。

它有什么不同?

如今的 Web 开发人员拥有丰富的选择。除了上述框架之外,还有 Astro 等选项、经过实战检验的服务器框架,如 RailsLaravel,以及数百万个静态网站生成器。这些都是很棒的工具,您应该对选择它们感到满意。

然而,SvelteKit 的做法略有不同。

与传统的“多页面应用程序”或 MPA 框架不同,它在初始服务器渲染页面加载后默认为客户端导航。这可以实现更快的页面过渡、跨页面持续存在的状态(例如侧边栏的滚动位置)以及更少的网络数据使用。它还可以避免在每个页面加载时重新运行第三方脚本(如分析脚本)。

与传统的服务器框架不同,它允许您使用一种语言,而不是实际上拥有两个紧密耦合的应用程序(一个用于生成 HTML,一个用于处理客户端交互)。由于 SvelteKit 在 JavaScript 可以运行的任何地方运行,因此您可以将您的应用程序部署为传统的 Node 服务器,或使用无服务器函数——包括边缘函数。

与静态网站生成器不同,您可以构建具有个性化或动态数据的应用程序——无需在页面加载后从浏览器获取数据带来的性能下降和布局偏移的影响。

使用 SvelteKit,您可以灵活选择。许多框架假设构建应用程序有一种正确的方法,但现实情况更加复杂。例如,预渲染静态页面并非仅仅是低配版的 cache-control——它还可以让您执行构建时验证或从您的边缘函数无法访问的文件系统渲染数据,并作为对不稳定的数据库的防御措施。并非所有内容都需要服务器端渲染——如果您希望构建稳健、高性能且 SEO 友好的应用程序,它是一个不错的默认选择,但也有无数例外情况。

在 SvelteKit 应用程序中,您可以根据需要进行尽可能细粒度的选择——例如,您正在查看的页面是预渲染的,但 REPL 是使用动态数据渲染的。在两者之间切换只需一行代码。我们将使用这种方法构建的应用程序称为“过渡性应用程序”。

我可以在 SvelteKit 中使用什么?

由于 SvelteKit 使用 Vite(一个闪电般快速的构建工具),因此它开箱即用地支持热模块重载、TypeScript 和许多其他开发者依赖的功能。您可以从庞大的 Vite 和 Rollup 生态系统中安装插件,以添加对其他工具的支持。

在创建 SvelteKit 项目时,系统会询问您是否要添加 TypeScriptESLintPrettierPlaywright(用于端到端浏览器测试)和 Vitest(用于单元测试)。许多流行项目的集成指南已经存在——例如 TailwindSupabase。您可以使用 StorybookHistoire 来创建组件故事。社区维护的 svelte-add 允许您使用单个命令添加越来越多的其他集成。

当然,您还可以访问 npm 提供的所有内容。(请注意,某些软件包需要 Node.js,因此只能在部署到基于 Node 的平台时使用。)

在哪里可以部署我的应用程序?

任何地方!SvelteKit CLI 需要在本地安装 Node.js,但框架本身不依赖于任何平台。这意味着您可以在 JavaScript 可以运行的任何地方部署它。

这得益于 适配器。默认适配器 adapter-auto 为 Vercel、Netlify、Cloudflare Pages 和 Azure 静态 Web 应用提供了零配置支持,未来将支持更多平台。社区提供的适配器增加了对 Deno、Bun、Firebase、App Engine、AWS Lambda 和许多其他平台的支持。

您还可以使用 adapter-node 将您的应用程序部署为 Node.js 服务器。

如果您的整个应用程序适合预渲染,或者是一个单页应用程序 (SPA),您可以使用 adapter-static(它将 SvelteKit 变成一个静态网站生成器)与任何 Web 服务器(包括 GitHub Pages)一起使用。

鸣谢

此版本的发布得益于许多人的辛勤工作。首先,我们要感谢 Svelte 社区,他们的深刻反馈和各种或大或小的贡献,将这个项目塑造成我们真正自豪与更广泛的 Web 开发者社区分享的东西。

我们还要感谢 Svelte Society 和社区大使们,他们通过 Svelte SummitSvelte Sirens 等举措,为在线和线下 Svelte 开发者创造了一个充满活力和欢迎的空间。

如果不提及一些内容创作者,就会遗漏很多人,但对于所有发布过 SvelteKit 课程和制作过教育内容的人:谢谢你们。

早在 2021 年初,当我们采用 Vite 时,我们是第一个这样做的主要应用程序框架。当时这是一个冒险的举动,但我们对这个赌注的回报感到非常兴奋。Vite 已发展成为 JavaScript 世界中一股不可阻挡的力量,Vite 团队一直是才华横溢且慷慨的合作伙伴。

我们得到了 VercelNetlifyCloudflare 团队的极大支持,使这些平台的零配置部署成为可能。

我们 StackBlitz 的朋友们夜以继日地工作,使 learn.svelte.dev(我们第一个此类基于 WebContainer 的交互式教程)成为现实。

最后,如果没有项目的财务支持者,这一切都不可能实现。这包括数百位 Open Collective 上的支持者,以及 Vercel,该公司聘用了两位核心开发者(RichSimon)全职致力于 Svelte 项目,并以多种方式支持该项目,例如 StephSvelteKit 初学者课程

迁移

如果您使用的是 SvelteKit 预发布版本构建的应用程序,我们建议您先升级到最终的预发布版本——@sveltejs/[email protected]——然后再升级到 1.0,因为稳定版本会移除用于在预发布版本之间迁移的错误和警告。我们还建议您查阅此迁移指南,尤其是在您当前使用的版本早于 1.0.0-next-406 的情况下。

接下来是什么?

SvelteKit 1.0 是一个开始,而不是结束。它今天已准备好投入生产使用,但我们才刚刚起步。我们的路线图包括内置的 i18n 支持、增量静态重新生成、对部署区域和运行时的细粒度控制、图像优化以及许多其他改进。明年,我们还将开始着手 Svelte 4 的工作——稍后会详细介绍。

但不要让我们拥有最终的发言权。Svelte 是一个社区项目,我们许多最好的想法实际上并不属于我们——它们属于你们。在 TwitterYouTube 上订阅 Svelte Society 以保持最新状态,并加入我们的 Discord 服务器GitHub 上贡献代码。

我们迫不及待地想看看您将构建什么。