Svelte 热重载问题

Svelte Hot Reloading Issue

最近开始使用 sveltejs 模板玩弄 Svelte。一切正常,但是当我对文件进行任何更改时,它不会将更改热重新加载到 Web 浏览器,因此我必须手动刷新页面才能看到更改。设置中是否有任何选项可以启用该功能,或者目前无法启用?

默认模板(https://github.com/sveltejs/template) uses Rollup, which doesn't support hot module reloading. The webpack version (https://github.com/sveltejs/template-webpack) will support HMR, but first we need to add some hooks to Svelte itself to make it possible. There's an issue you can track here — 希望我们能尽快完成这项工作。

到那时,Tholle 关于使用 livereload 插件的建议可能是最好的折衷方案。

更新2022-03-24

Svelte 现在正式支持 HMR,包括 Vite、Svelte Kit 和 Webpack。 Svelte 的 Snowpack 插件也支持 HMR。

以下信息基本上仍然是关于 Rollup 宇宙中 HMR 支持的最新信息。

关于 HMR,今天的 Vite(以及在引擎盖下使用它的 Kit)可能是迄今为止最好的解决方案。它具有出色的 HMR 支持,并且在开发过程中比 Rollup 等面向捆绑优化的工具要快得多。

(所以,接受的答案现在更错了!)


只是为了反驳作者自己的库,我要争辩说公认的答案都是错误的。

Rollup 可以 有 HMR rollup-plugin-hot. As previously noted in the comments, Nollup 也可以做到。

这样,您就可以将更新的代码推送到浏览器并刷新(即销毁 + 重新创建)您的整个应用程序,而无需重新加载页面。然而,这并不比重新加载整页好多少,如果有的话。

您想要的是仅替换受代码更新影响的 Svelte 组件,以便保留您当前的应用程序状态,并且尽可能地还希望保留更新组件的状态.为此,您可以将 rollup-plugin-svelte-hot with Rollup / Nollup, or svelte-loader-hot 与 Webpack 一起使用。

等待官方支持,我维护官方模板 + HMR 的克隆:svelte-template-hot for Rollup / Nollup, and svelte-template-webpack-hot for Webpack. There is also sapper-template-hot for Sapper (only supports Webpack). And, for completeness, svelte-native-template(不是我维护的)也包括 HMR 支持。

Svelte 仍未正式支持 HMR。 Rich 的回答中提到的问题已经关闭。现在可以在 this issue.

中跟踪进度

(当然,Rich的答案在最初写的时候是正确的。从官方的角度来看仍然是正确的。而且这个答案是为我自己的项目做广告的无耻插件,因为这个问题在Google, 但我希望它仍然有用。)