使用ViteJS React/SolidJS检测HMR事件

Question

使用ViteJS starter for React/SolidJS，

我如何检测(使用某种js回调)之前HMR重载是由代码更改触发的?(做一些清理)

需要说明的是，我不是在问如何使用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文件，其中包含观看fetch事件的内容:

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

并在你的主文件中注册service worker:

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