前言
之前我为了提高工作效率，实现了我的第一个npm包。
我的第一个npm包：plugin-zip-pack - 掘金 (juejin.cn)
用ts重构基于rollup的npm包踩坑记录 - 掘金 (juejin.cn)
这个插件主要用于 webpack、vite、rollup 项目打包后将指定文件夹打包为 .zip的压缩包、并且打包完成后在终端输出结果信息，包含打包名称、目录、完成时间等，结果一目了然。自己动手从0到1的过程还是蛮有成就感的。
但最近我又突然有了新的想法，如果我在打包完成后可以自动把消息推送到我的微信，那不是体验感美滋滋吗？
毕竟有的项目很大，打包时间确实很长，我们打包时也不会一直盯着终端呀！ 还有个情况就是当你忙的不可开交的时候，前脚刚潇洒的在终端输入了 npm run build 后转头就去（摸鱼）忙别的工作去了
结果年龄大了、（摸鱼太入迷了）记性也不好了，本来10点打的包， 12点了，猛的一下才想起来，哇趣！！！ 我的xxx项目还打了个包呢，快去看看
想到这些痛点，我觉得就是现在必须给我的插件实现这个功能，打包结果消息推送到个人微信！
npm包地址： plugin-zip-pack - npm (npmjs.com)
文档地址： silin001.github.io/docs/blogs/…
需求分析
需求有了，接下来就是想如何实现了；其实我的需求很简单，就是在打包结束后把结果推送到微信，也不一定必须是微信、企业微信，钉钉、邮箱、短信都是可以实现的，我这里选择了微信。
简单说就是消息推送功能。 虽然简单但是我没有做过呀！于是我开始查阅资料进行了解学习。
关键点：
- 消息推送服务api
可以使用现成别人写好的服务、当然也可以使用java、node自己实现一个；为了效率当然先使用别人的啦 - 服务器
因为我们写好代码，最终是要将其部署到服务器上跑的，但我这里的使用场景是每次打包时运行，而且我使用第三方消息推送服务，所以不涉及到我需要自己准备一台服务器，就不用考虑服务器这一点了
消息推送服务
经过学习和了解，市面上有一些实现好的消息推送服务，我罗列一下，有免费的有收费的，可以根据自己的需求来选择。
Sever 酱
「Server 酱」，英文名「ServerChan」，是一款「手机」和「服务器」、「智能设备」之间的通信软件。 注册要GitHub账号，免费额度每天只有5条，推送条数多的话需要付费。
官网： sct.ftqq.com/
wxpusher
WXpusher 说明文档有一些复杂，但是功能强大，感觉更像是一个为企业服务的公众平台。可以一次给很多你的客户发送消息，有完整的API。最强大的功能就是它有内信功能，就是发送消息不是用模版，而是直接发消息。很直观很清晰。server酱、虾推啥这些服务都是模版消息，需要点击一次才能看到消息。但是只能限时48小时，过期要主动开启。
官网： WxPusher微信推送服务 (zjiecode.com)
PushPlus
PushPlus 是目前功能最全，免费额度最高的一家了。如果你没有任何基础，甚至可以直接使用他们的微信服务号或者小程序接收推送。 有广告、开会员可以去除广告
IGot
iGot 是一款聚合 APP、邮箱、微信等多种方式的第三方推送平台，您可以通过一行代码、一次请求简单实现消息推送。
虾推啥
号称：一行代码推送手机通知，每日免费推送上限 300
官网： 虾推啥(xtuis.cn)
虾推啥服务使用遇到的问题
多行消息面板的样式
直接默认推送消息是可以的，但是样式有点简单，于是想修改一下消息模板的样式。
先开始这样的样式绑定到 div标签上不生效
export const xtsBgStyle = {
width: "100%",
height: "300px",
border: "10px solid #000",
padding: "10px",
lineHeight: "20px"
};
我仔细检查单词也没错呀，就是不生效，后来尝试发现原来是 border: "10px solid #000" 这行代码中的颜色值 #000 造成的，它是不支持 16进制的写法，需要使用英文，如改成： red 就生效了
修改后生效：
最后就是自己发挥了，该模板是支持页面元素的，对于前端来说简直太简单了，想要什么样式自己实现就行啦：
最终打包完成通知效果
使用:
import { pluginZipPackVite } from 'plugin-zip-pack'
// ...
pluginZipPackVite({
optZipName: 'v3ts测试',
isPushVx: true,
xtsToken: 'tokenxxx'
}),
最终效果：
总结
核心代码非常之简单所以就没贴了，其实就是封装一个函数，在打包完成钩子函数中判断是否推送消息，然后执行该函数，从而调用第三方消息推送服务api实现消息推送。
虽然功能很简单，调用api而已，但从0到1完成这个需求的过程感觉很不错，从而也会在其中有所收获。 实习过程中也借鉴了网上很多资料，谨以此篇记录自己的学习过程也希望能帮助到其他同学！
如果文章对你有帮助，可以点赞、评论、收藏、转发互动支持哈😀😀😀
点击 学习交流群(前端微信群) 加vx拉你进 前端学习交流群 让我们一起 好好学习（🐟🐟🐟）吧😎😎😎
参考资料
使用WxPusher给自己的个人微信发送提醒消息（WxPusher微信推送服务） - 知乎 (zhihu.com)
