30 天影集播放清單 https://www.youtube.com/playlist?list=PLBd8JGCAcUAEFJzjAQC6DbWTeDICcanFF
Youtube 連結：https://www.youtube.com/watch?v=xUZrrhyP0m8
各位好，這個系列影片將一起深入解讀 Vite 的原始碼，透過這個過程，我們將更加了解 Vite 這個工具究竟在背後做了哪些事情，同時也能提升我們對 JavaScript 的熟悉度。
在上一集中，我們追到當我們執行 npm run dev 指令之後，Vite 如何啟動一個伺服器。在這一集中，我們將關注負責監控檔案的異動以及新增或刪除的事件。
當我們新增、刪除或修改檔案時，由 Chokita 做出來的 watcher 會以不同方式處理。這個判斷過程通常涉及到檔案是否與設定檔或環境變數相關。如果修改的檔案是設定檔或與設定檔相關，watcher 會觸發一個顯示綠色訊息的事件，表明進行了修改，然後嘗試重新啟動伺服器。如果發生問題，則會出現紅色的錯誤訊息。
如果是修改檔案，會視情況透過 WebSocket 發送通知給前端，前端再視情況要做 HMR（Hot Module Reload）還是 Full Page Reload。
總結來說，今天這集我們看到當檔案發生異動時如何處理新增、修改和刪除檔案的不同情況，並且簡介了與重新啟動伺服器相關的過程。此外，我們還簡單介紹了 picocolors 套件，它可以用於終端機輸出顏色文字。
在這個系列影片中，我們將繼續研究 Vite 的原始碼，希望可以更全面地了解 Vite 的運作原理。歡迎訂閱我的 Youtube 頻道，我們下集見！
參考資料：
iThome鐵人賽
看影片追技術