使用 ViteJS 检测 HMR 事件 React/SolidJS

Question

为 React / SolidJS 使用 ViteJS 启动器，

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

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

我试过 window.onbeforeunload 没用。

谢谢。

Answer 1

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

您可以在接受补丁的模块中使用 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');

Detect HMR event with ViteJS React/SolidJS