大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~

背景

是這樣的，前幾天我們小組在上線某一個平臺的時候，上線后，發現了一個生產 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 下

圖片

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

圖片

圖片

圖片