卸载 Svelte 应用程序，使用新代码重新加载

Question

svelte 应用程序构建在 Electron 后端，使用 rollup 和一些插件在运行时。目前，我有一个每隔几秒触发一次构建的时间间隔，但我计划监视文件并在更改时触发构建。然后，构建代码通过 IPC 发送到渲染器预加载脚本。

在此脚本中，代码放置在附加到文档正文的内联脚本标记的

.innerHTML

内（类型为

module

）。

好的，到目前为止一切正常，我可以看到应用程序渲染。

但是，如果我使用新的构建代码发送另一个 IPC 调用，在替换innerHTML 后，我仍然会看到以前的 svelte 应用程序、相同的 html、样式和所有内容！

这意味着仅替换 javascript 不会触发重新加载。 有没有办法触发它，也许是一些简洁的函数调用来进行完全清理之类的？

---

预加载脚本可能会让我更好地了解如何进行此设置：

let build;
const bundle = document.createElement("script");
bundle.type = 'module';
function refreshApp(){
  if(build){
    bundle.innerHTML = `${build.js} new App({ target: document.body })`;
  }
}

ipcRenderer.on('build', (e, js, css ) => {
  build = { js, css }; // css not needed
  refreshApp(); // script tag contents are updated, but not the actual Svelte app
});

document.addEventListener("DOMContentLoaded", () => {
  document.body.appendChild(bundle);
  refreshApp();
});

Answer 1

理想情况下，将组件存储在全局变量中，然后

$destroy

它，或者将其渲染到一个专用元素，然后可以将其删除（尽管这不会清理所有内容，例如通过

<svelte:window>添加的全局事件侦听器

，所以我不推荐这个。

我也会完全替换旧脚本，而不是尝试重用它，不知道规范对此有何说明，但不希望它能够工作。