大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~
背景
是这样的，前几天我们小组在上线某一个平台的时候，上线后，发现了一个生产 BUG ，大家都心急如焚，然后找到了代码原因后，组员进行了代码修改，然后让老大进行部署上线
部署完后，发现了这个生产 BUG 还是存在！！！关掉缓存刷新、重启，这些都试过了，还是存在问题，这个时候大家都很疑惑：
- 部署成功了，为啥还有这个生产 BUG？
- 难道是 CICD 上提示部署成功，实际上没部署成功？
- 或者是部署成功了，但是代码依旧有问题？
总之就是一个问题：到底部署成功了没？
后面发现其实是没部署成功，虽然 CICD 上提示成功了，但是最后部署错镜像了，导致问题依旧存在
这件事情之后，我觉得应该搞个信息，每次上线的时候这个信息都能带到网页上去，这样我们就知道网页的代码到底是不是最新的了！！！
那应该带什么信息呢？其实带 Git 信息就可以了！！！比如：
- 当前 Git 的最后一次提交 hash
- 当前 Git 的最后一次提交 时间
- 等等
只要带上这些信息，就可以在部署后遇到问题的时候，能指导到底是不是部署成功了！
小练习
在做这个插件之前，先给大家一个小练习，咱们写一个 vite 插件，这个插件的作用是，在打包的时候，给 widnow 加一个变量
transformIndexHtml 是插件的一个钩子函数，可以在这个函数中去定义你想要塞哪些东西到 index.html 中
图片
思路其实很简单，就是在 head 下新增一个 script 标签，内容是：window.constant = 2
接着在 vite.config.ts 中引入插件，并使用
图片
图片
然后启动页面，我们可以看到 head 标签下，出现了一个 script 标签，这个标签就是我们新增上去的
图片
现在我们到控制台，看看能不能获取到 constant 这个全局变量，发现是可以获取到的
图片
举一反三
思路有了，其实想要加一些 Git 信息到网页上也不难了，无非就是通过调用命令行，把一些 Git 信息加到 window 下
先看一下我最新的一条 Git 提交，现在的任务就是把这个提交的一些信息，加到 window 下
图片
插件的代码如下，代码量非常的少，有了这个插件，以后就不用再去猜到底部署成功没了~
图片
图片
图片
