[Vite 原始碼解讀] 當檔案異動的時候...

https://ithelp.ithome.com.tw/users/20065770/ironman/6302

各位好，這個系列影片將一起深入解讀 Vite 的原始碼，透過這個過程，我們將更加了解 Vite 這個工具究竟在背後做了哪些事情，同時也能提升我們對 JavaScript 的熟悉度。

在上一集中，我們追到當我們執行 npm run dev 指令之後，Vite 如何啟動一個伺服器。在這一集中，我們將關注負責監控檔案的異動以及新增或刪除的事件。

當我們新增、刪除或修改檔案時，由 Chokita 做出來的 watcher 會以不同方式處理。這個判斷過程通常涉及到檔案是否與設定檔或環境變數相關。如果修改的檔案是設定檔或與設定檔相關，watcher 會觸發一個顯示綠色訊息的事件，表明進行了修改，然後嘗試重新啟動伺服器。如果發生問題，則會出現紅色的錯誤訊息。

如果是修改檔案，會視情況透過 WebSocket 發送通知給前端，前端再視情況要做 HMR（Hot Module Reload）還是 Full Page Reload。

總結來說，今天這集我們看到當檔案發生異動時如何處理新增、修改和刪除檔案的不同情況，並且簡介了與重新啟動伺服器相關的過程。此外，我們還簡單介紹了 picocolors 套件，它可以用於終端機輸出顏色文字。

在未來的影片中，我們將繼續深入探討 Vite 的原始碼，希望可以更全面地了解它的運作原理。請記得訂閱我的頻道，我們下期再見！

參考資料：

• chokidar https://www.npmjs.com/package/chokidar
• picocolors https://www.npmjs.com/package/picocolors

#vite #原始碼解讀 ... https://www.youtube.com/watch?v=xUZrrhyP0m8