用ViteJS React/SolidJS检测HMR事件

Question

使用ViteJS启动器进行React / SolidJS，

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

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

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

谢谢。

Answer 1

window.onbeforeunload无法工作，因为在HMR中，页面从未被重新加载。HMR的工作方式是用websocket接收的新模块对现有模块进行修补。

您可以使用HMR连接到更新管道。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!!');
  });
}

或者，您可以使用服务工作人员监视网络事件。创建一个JavaScript文件，其内容监视获取事件：

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

并在您的主文件中注册服务人员：

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