Svelte 5 它来了经过近 18 个月的开发，包括数十位贡献者的数千次提交，Svelte 5 终于趋于稳定。看看更新

经过近 18 个月的开发，包括数十位贡献者的数千次提交，Svelte 5 终于趋于稳定。

这是该项目历史上最重要的一次发布。Svelte 5 是一次彻底的重写：你的应用程序将更快、更小、更可靠。你将能编写更一致、更习惯化的代码。对于框架新手来说，需要学习的东西更少了。

尽管如此，Svelte 几乎完全向后兼容 Svelte 4，对于大多数用户来说，初始升级将是完全无缝的：

{
	"devDependencies": {
		"@sveltejs/vite-plugin-svelte": "^3.0.0",
		"svelte": "^4",
		"@sveltejs/vite-plugin-svelte": "^4.0.0",
		"svelte": "^5",
		// …
	}
}

什么是 Svelte？

Svelte 是一个用于在网络上构建用户界面的框架。它使用编译器将基于 HTML、CSS 和 JavaScript 的声明式组件代码转换为经过严格优化的 JavaScript。

由于编译器将大量工作从浏览器转移到 npm run build 中，因此 Svelte 应用程序既小又快。除此以外，Svelte 的设计初衷是以一种愉快、直观的方式来构建应用程序：它优先考虑完成任务。

背后的团队还维护着 SvelteKit，这是一个应用程序框架，用于处理路由、数据加载、服务器端渲染以及构建现代网站和应用程序的所有繁琐细节。

有什么变化？

首先，我们对网站进行了全面改造。

至于 Svelte 本身，我们将首先介绍变化原因。我们不喜欢为了改变而改变--事实上，从 2019 年（我们推出 Svelte 3）到现在，Svelte 的改变比其他任何主要框架都要少，这在前端开发领域是一个漫长的过程。人们非常喜欢 Svelte 3 和 4，它在开发人员满意度调查中经常名列前茅。

因此，我们不会轻易做出改变。

随着越来越多的人使用 Svelte 构建更多更大的应用程序，我们最初的一些设计决策的局限性开始变得越来越明显。例如，在 Svelte 4 中，响应式完全由编译器驱动。在 Svelte 4 中，如果你改变了响应对象的一个属性，整个对象就会失效，因为编译器只能做到这一点。与此同时，其他框架采用了基于信号的细粒度响应式，在性能上超越了 Svelte。

同样，在 Svelte 4 中，组件的组成也比想象中更复杂，这主要是因为它将事件处理程序和 "插槽内容 "视为独立的概念，有别于传递给组件的 props。这是因为在 2019 年，网络组件很可能成为组件的主要分发机制，而我们希望与该平台保持一致。这是一个错误。

虽然用于响应式重新运行语句的 $: 结构是一个很好的技巧，但它最终却成了一把 "猎枪"。它混淆了两个本应分开的概念（派生状态和副作用），而且由于依赖关系是在语句编译时（而不是运行时）确定的，因此它阻碍了重构。 Svelte 5 消除了这些不一致性。它引入了 runes，这是一种用于（除其他外）声明响应式的明确机制：

let count = 0;
let count = $state(0);

与状态的交互没有变化：与其他框架不同，Svelte 的 count 只是一个数字，而不是一个函数，也不是一个具有 value 属性的对象，更不是只能通过相应的 setCount 才能改变的东西：

function increment() {
	count += 1;
	console.log({ count });
}

除了 .svelte 组件外，Runes 还可用于 .svelte.js 和 .svelte.ts 模块，这意味着你可以使用单一机制创建可重用的响应式逻辑。

现在，事件处理程序就像其他 props 一样，可以轻松知道（例如）组件的用户是否提供了特定的事件处理程序（这对于避免昂贵的设置工作非常有用），或者将任意事件处理程序分散到某个元素上，这对于库作者来说尤为重要。

此外，用于在组件间传递内容的 slot 机制（以及令人困惑的 let: 和 <svelte:fragment> 语法）已被 {#snippet …} 所取代，后者是一个功能更为强大的工具。

除了这些变化，还有无数的改进：原生 TypeScript 支持（不再需要预处理器！）、许多错误修复以及性能和可扩展性的全面提升。

如何升级？

如果你目前使用的是 Svelte 3，请先迁移到 Svelte 4。

在这里，你可以更新 package.json 以使用最新版本的 svelte 和辅助依赖项 vite-plugin-svelte 。

你不必立即更新你的组件--几乎在所有情况下，你的应用程序都将继续按原样运行（除了速度更快）。但我们建议你开始迁移组件，以便使用新的语法和功能。你可以使用 npx sv migrate svelte-5 迁移整个应用程序，或者，如果您你的是带有 Svelte 扩展的 VS Code，你可以在命令调板中选择 "将组件迁移到 Svelte 5 语法"，一次迁移一个组件。

Svelte 拥有一个庞大而强大的组件库生态系统，你可以在你的应用程序中使用这些组件库，如 shadcn-svelte、Skeleton 和 Flowbite Svelte。但您你等到这些库升级到 Svelte 5 后再升级自己的应用程序。

最终，对 Svelte 4 语法的支持将被逐步淘汰，但这不会在短期内发生，你将有足够的时间提前做好准备。

有关详细信息，请参阅全面的 Svelte 5 迁移指南。

我们的新 CLI

在推出新版 Svelte 的同时，我们还推出了新的命令行界面 (CLI)-- sv 。你可以在 sv 公告视频和即将发布的博文中了解有关它的所有信息。

下一步是什么？

我们计划在不久的将来发布利用 Svelte 5 新功能的 SvelteKit 新版本。在此期间，你可以立即使用 Svelte 5 和 SvelteKit， npx sv create 将创建一个安装了 Svelte 5 的新 SvelteKit 项目。

在此之后，我们还有很多想法要在 Svelte 中实现。这个版本为许多改进打下了基础，而这些改进在 Svelte 4 的基础上是不可能实现的，我们已经迫不及待地要撸起袖子加油干了。