Svelte 热重载问题

Posted 2023-02-19

【中文标题】Svelte 热重载问题

【英文标题】：Svelte Hot Reloading Issue

【发布时间】：2019-09-14 11:04:17

【问题描述】：

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

【问题讨论】：

欢迎来到 Stack Overflow Ben！ Svelte 3 还没有热重载，但你可以自动刷新浏览器的更改，例如LiveReload Rollup plugin.

2020 年，可以等待 SvelteKit svelte.dev/blog/whats-the-deal-with-sveltekit 用 Snowpack 替换 Rollup（在开发中）。官方 HMR。

【参考方案1】：

默认模板 (https://github.com/sveltejs/template) 使用 Rollup，它不支持热模块重新加载。 webpack 版本 (https://github.com/sveltejs/template-webpack)将支持 HMR，但首先我们需要为 Svelte 本身添加一些钩子以使其成为可能。您可以跟踪一个问题 here — 希望我们能够尽快完成这项工作。

在此之前，Tholle 建议使用 livereload 插件可能是最好的折衷方案。

【讨论】：

来自 Twitter 的评论表明，Nollup 可以用于 Rollup 项目中的 HMR — 我自己没有使用过它，YMMV，但听起来很有希望mobile.twitter.com/PepsRyuu/status/1121808611217420290

干得好 Rich，我对 v3 印象深刻。关于 TypeScript 支持的任何想法和时间表？

没有时间线，没有——只是“当我们找到它的时候”。虽然这是一个优先事项！

刚刚测试了 npx degit sveltejs/template my-app 和 npx degit "sveltejs/sapper-template#rollup" my-app、npm install 和 npm run dev，这两个模板都可以与 HMR 一起使用。 2020-05-03

【参考方案2】：

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

汇总可以通过rollup-plugin-hot 拥有 HMR。正如之前在 cmets 中提到的，Nollup 也可以做到。

这样，您就可以将更新的代码推送到浏览器并刷新（即销毁 + 重新创建）整个应用程序，而无需重新加载页面。但是，这并不比重新加载整页好多少。

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

等待官方支持，我维护官方模板 + HMR 的克隆：svelte-template-hot 用于 Rollup / Nollup，svelte-template-webpack-hot 用于 Webpack。 Sapper 还有sapper-template-hot（仅支持Webpack）。而且，为了完整起见，svelte-native-template（不是我维护的）还包括 HMR 支持。

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

（当然，Rich 的答案在最初写的时候是正确的。从官方的角度来看它仍然是正确的。而且这个答案是为我自己的项目做广告的无耻插件，因为这个问题在谷歌中排名很高，但我希望它仍然有用。）