宣布 SvelteKit 1.0 发布
简化的 Web 开发
经过两年的开发,SvelteKit 终于达到了 1.0 的版本。从今天起,它被推荐为构建各种规模 Svelte 应用程序的最佳方式。
我们非常兴奋地与您分享这个版本。这是 Svelte 核心团队和更广泛社区共同投入数千小时努力的成果,我们认为这是一种最令人享受的方式来构建生产级的网站,无论您是为一个小项目工作的独立开发者还是一个大型团队的一部分。
要开始使用,只需运行 npm create svelte@latest
,并访问 文档 和(实验性的!)互动教程。
什么是 SvelteKit?
SvelteKit 是一个建立在 Svelte 之上的 Web 应用程序框架,而 Svelte 是一个以高性能和易用性备受 开发者 喜爱 的 UI 组件框架。
如果您用过像 Svelte 这样的组件框架,那么您会知道它们可以让构建用户界面比直接操作 DOM 更加容易。但是它们仍然留下了许多未解的问题:
- 我如何组织我的源码?
- 我如何添加服务器端渲染?
- 我如何添加既能在服务器又能在浏览器中工作的路由?
- 我如何让客户端路由更具可访问性?
- 我如何获取数据?
- 我如何修改数据?
- 我如何处理错误?
- 我如何优化我的生产构建?
- 我如何明智且安全地处理环境变量?
- 我如何添加 CSP 头和 CSRF 保护?
- 我如何添加一个知道该缓存哪些内容的服务工作线程?
- 我如何为部署准备我的应用程序?
一个应用程序框架就是为了回答这些问题而设计的。SvelteKit 的设计基于众多测试者的真实世界需求(其中许多人已经在生产中使用 SvelteKit 一段时间了——我们向你们的勇气致敬并感谢你们提供的宝贵反馈),同时吸取了其他应用框架的最佳设计理念,包括 Next.js 和 Remix。
它有何不同?
如今的 Web 开发者有很多选择。除了前面提到的框架,还有 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 转变为一个静态网站生成器,可以与任何 Web 服务器(包括 GitHub Pages)配合使用。
致谢
这个版本的发布得益于许多人的辛勤工作。首先,我们要感谢 Svelte 社区,他们的深刻反馈以及大小件贡献使这个项目成为我们非常自豪地分享给更广泛的 Web 开发者社区的作品。
我们还要感谢 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 开设的 SvelteKit 初学者课程。
迁移
如果您使用的是 SvelteKit 的预发布版本,我们建议您在升级到 1.0 之前,先升级到最后的预发布版本——@sveltejs/kit@1.0.0-next.588
。稳定版本删除了用于从预发布版本迁移的错误和警告信息。我们还建议您查阅 这个迁移指南,特别是如果您当前使用的版本低于 1.0.0-next-406。
接下来是什么?
SvelteKit 1.0 是一个起点,而非终点。它已经可以用于生产,但我们才刚刚开始。我们的路线图包括内置的国际化支持、增量静态生成、更精细的部署区域和运行时控制、图像优化以及许多其他改进。明年我们还将开始 Svelte 4 的开发——更多信息将稍后公布。
但我们不想完结一切对话。Svelte 是一个社区项目,许多最棒的点子都不是我们的,而是社区提供的。订阅 Twitter 和 YouTube 上的 Svelte Society 来获取最新资讯,或者加入我们的 Discord 服务器 和 GitHub 页面,回馈自己的贡献。
我们迫不及待地想看到您会构建出什么。