大家好，我是林三心，用最通俗易懂的話講最難的知識點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心~

背景

是這樣的，前幾天我們小組在上線某一個平臺的時候，上線后，發(fā)現(xiàn)了一個生產(chǎn) BUG ，大家都心急如焚，然后找到了代碼原因后，組員進(jìn)行了代碼修改，然后讓老大進(jìn)行部署上線

部署完后，發(fā)現(xiàn)了這個生產(chǎn) BUG 還是存在?。?！關(guān)掉緩存刷新、重啟，這些都試過了，還是存在問題，這個時候大家都很疑惑：

• 部署成功了，為啥還有這個生產(chǎn) BUG？
• 難道是 CICD 上提示部署成功，實(shí)際上沒部署成功？
• 或者是部署成功了，但是代碼依舊有問題？

總之就是一個問題：到底部署成功了沒？

后面發(fā)現(xiàn)其實(shí)是沒部署成功，雖然 CICD 上提示成功了，但是最后部署錯鏡像了，導(dǎo)致問題依舊存在

這件事情之后，我覺得應(yīng)該搞個信息，每次上線的時候這個信息都能帶到網(wǎng)頁上去，這樣我們就知道網(wǎng)頁的代碼到底是不是最新的了！??！

那應(yīng)該帶什么信息呢？其實(shí)帶 Git 信息就可以了?。?！比如：

• 當(dāng)前 Git 的最后一次提交 hash
• 當(dāng)前 Git 的最后一次提交 時間
• 等等

只要帶上這些信息，就可以在部署后遇到問題的時候，能指導(dǎo)到底是不是部署成功了！

小練習(xí)

在做這個插件之前，先給大家一個小練習(xí)，咱們寫一個 vite 插件，這個插件的作用是，在打包的時候，給 widnow 加一個變量

transformIndexHtml 是插件的一個鉤子函數(shù)，可以在這個函數(shù)中去定義你想要塞哪些東西到 index.html 中

圖片

思路其實(shí)很簡單，就是在 head 下新增一個 script 標(biāo)簽，內(nèi)容是：window.constant = 2

接著在 vite.config.ts 中引入插件，并使用

圖片

圖片

然后啟動頁面，我們可以看到 head 標(biāo)簽下，出現(xiàn)了一個 script 標(biāo)簽，這個標(biāo)簽就是我們新增上去的

圖片

現(xiàn)在我們到控制臺，看看能不能獲取到 constant 這個全局變量，發(fā)現(xiàn)是可以獲取到的

圖片

舉一反三

思路有了，其實(shí)想要加一些 Git 信息到網(wǎng)頁上也不難了，無非就是通過調(diào)用命令行，把一些 Git 信息加到 window 下

先看一下我最新的一條 Git 提交，現(xiàn)在的任務(wù)就是把這個提交的一些信息，加到 window 下

圖片

插件的代碼如下，代碼量非常的少，有了這個插件，以后就不用再去猜到底部署成功沒了~

圖片

圖片

圖片