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

背景

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

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

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

總之就是一個(gè)問(wèn)題：到底部署成功了沒(méi)？

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

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

那應(yīng)該帶什么信息呢？其實(shí)帶 Git 信息就可以了?。。”热纾?/p>

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

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

小練習(xí)

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

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

圖片

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

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

圖片

圖片

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

圖片

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

圖片

舉一反三

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

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

圖片

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

圖片

圖片

圖片