chrome浏览器插件热更新vite实战

最新推荐文章于 2024-09-11 14:05:14 发布

姑老爷呀

最新推荐文章于 2024-09-11 14:05:14 发布

阅读量676

点赞数

文章标签： chrome webpack 前端

本文链接：https://blog.csdn.net/pfourfire/article/details/128506773

版权

本文介绍了如何在没有webpack的情况下，利用Vite实现Chrome浏览器插件的热更新，通过WebSocket连接监听代码变更，实现页面局部或整体刷新，提升开发效率。并讨论了在Vite配置中插入自定义HRM插件以及处理配置文件变更的策略。

摘要由CSDN通过智能技术生成

热更新，又名模块热替换：Hot Module Replacement，简称HMR，无需完全刷新整个页面的同时，更新模块。HMR主要用于提升开发体验。

页面的刷新有多种情况：页面级别的刷新，简单粗暴，但是不保留页面状态。即：window.location.reload()，刀耕火种时代的页面更新都是采用这种方法，写完代码之后页面并不能及时看到效果。需要手动刷新页面，或者触发reload。

后来webpack提供了更为友好的开发体验，只更新局部模块，而不是刷新页面。在代码变更之后自动触发对应的更新。同时保留页面的状态（输入框的值、选择器的选中等）。我们首先知道webpack热更新原理：

1.dev-server和页面建立了websocket连接
2.监听到文件变化
3.通过websocket告诉页面模块发送了变化 4.页面局部更新

想要了解更详细的可以搜webpack热更新，此处不多做赘述。我们了解了大概原理之后，就可以在没有webpack的时候自己实现。浏览器插件的开发在代码编写完之后需要扔到浏览器扩展应用里面才可以看到效果，并且在代码变更之后是需要手动刷新，这时候我们就没有webpack工具来给我们提供热更新的支持。

我在尝试用vite开发浏览器插件的时候，就在思考，我们可以通过热更新一样的原理去帮插件自动更新。

同样的原理：

 const ws = new WebSocket('ws://localhost:2333')ws.onmessage = (event) => {console.log('reload trigger', event)let msg = JSON.parse(event.data)if

关注