我把前端部署用户提醒做成了一个npm包

功能要求

• 纯前端实现，不限制框架用React、Vue、Angular都可
• 不限制打包工具Webpack、Vite都可使用
• 使用发布订阅模式实现，支持用户自定义更新提醒事件
• 发布到npm，安装后开箱即用

功能实现

功能实现也非常简单，大致实现如下：

1. 打包构建的时候拿到webpack或者vite的打包id，通过Node的fs模块将其放到打包（/dist）目录下（最好是可访问的静态资源里面，例如/public/config.json）。

2. 我们需要写一个webpack或者vite插件在打包构建完成后拿到hash生成文件，然后输出到/dist目录里，还好我们有unplugin，一套代码可以适配webpack、vite插件。

代码如下：

3. 然后前端通过轮询这个文件，对比hash有变化则打开一个弹窗提醒用户有新功能发布。
我用发布订阅模式写了一个AppUpdate的类去实现这个功能，。
首先我们需要有一个获取config.json配置文件的方法，为了不引入axios直接使用fetch API

4. 然后我们需要在首次进入页面时加载一次当前配置文件获取初始hash值

5. 开启轮询，对比hash是否变化

6. 支持用户自定义更新和未更新的事件回调

7. 默认添加应用更新弹窗提醒

如何使用

安装

Webpack

Vite

入口配置

AppUpdate选项

属性	类型	描述	默认值
url	String	config.json配置文件url	config.json
interval	Number	轮询时间间隔	30000
locate	zh_CN | en_US	国际化	Default language of browser
custom	Boolean	设置为true可删除默认弹出提醒，添加on('update',fn)事件自定义弹出	false

注意

在本地开发时，需要在公共目录中放置一个config.json文件
手动更改哈希值以模拟项目构建
如果webpack或vite调整了公共目录，您应该新建AppUpdate({url:'your/customer/path')

404错误
在生产和本地开发过程中，配置时经常遇到404错误。找不到json

原文链接：https://juejin.cn/post/7406997325716013067