使用 ViteJS React/SolidJS 检测 HMR 事件

Question

使用 ViteJS starter for React / SolidJS，

在代码更改触发 HMR 重新加载之前，如何检测（使用某种 js 回调）？（进行一些清理）

需要明确的是，我不是问如何使用 HMR，只是问如何在此之前进行一些清理。

我尝试过使用window.onbeforeunload没有效果。

谢谢。

Answer 1

window.onbeforeunload不起作用，因为在 HMR 中页面永远不会重新加载。HMR 的工作方式是用通过 websocket 接收的新模块来修补现有模块。

您可以使用 HMR API 连接到更新管道。https://vitejs.dev/guide/api-hmr.html#hot-accept-cb

您可以使用accept模块内的方法接受补丁：

if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    console.log(`Receving new module...`, newModule);
  });
}

或者您可以在主文件中添加事件侦听器：

if (import.meta.hot) {
  import.meta.hot.on('vite:beforeUpdate', () => {
    console.log('Running before update!!');
  });
}

或者，您可以使用 Service Worker 来观看网络事件。创建一个 JavaScript 文件，其中包含监视获取事件的内容：

// sw.js
self.addEventListener('fetch', function(event) {
  console.log(event);
});

并在主文件中注册服务工作者：

navigator.serviceWorker.register('/sw.js');