30 天影集播放清單 https://www.youtube.com/playlist?list=PLBd8JGCAcUAEFJzjAQC6DbWTeDICcanFF

Youtube 連結：https://www.youtube.com/watch?v=lr8xX-dtCtY

在這個系列影集中，我希望跟大家一起研究 Vite 的原始碼，希望通過閱讀 Vite 的原始碼更深入地了解 Vite 的工作原理，並且提升我們的 JavaScript 技能。

在前幾集中，我們已經了解到當我們執行 npm run dev 指令時，它會啟動一個伺服器，並且我們已經探討過 chokida 在文件變化時的監控功能。在今天的這一集中，我們將繼續追啟動伺服器的其他行為。

首先，我們來看一下 Vite 中的伺服器啟動。官方文件描述了 middleware 模式（middleware mode）的概念，這是一種用於構建 SSR（伺服器端渲染）應用程式時的模式。在這種模式下，開發者希望完全控制伺服器，而不是讓 Vite 處理請求。因此，如果你設置了 middleware 模式，Vite 將不會啟動伺服器。這個概念在開發 SSR 應用程式時非常有用。回到原始碼，我們可以看到 Vite 的伺服器確實使用了 Node 的內置 HTTP 模組來啟動。

接著有趣的部分是關於代理（proxy）的設置。如果今天啟用了代理，Vite 將會以不同的方式處理請求。代理可以用來將請求轉發到外部服務，或者進行一些路徑轉換。這個功能對於在開發過程中測試 API 或將請求轉發到不同的服務非常有用。

其中發現一個有趣的 middleware 叫做 open-editor，它的作用是從 Node 中打開編輯器並編輯文件，這個 middleware 看起來與開發工具有關，而且還是由 Evan You 自己編寫的。

還有注意到一個特別有趣的地方，那就是關於 404 錯誤的處理。這段程式碼似乎是用於處理請求未找到的情況。通常在寫類似的 callback 函數時不一定會為其指定名稱。但開發者選擇明確留下了函數名稱，這可能是為了在調試過程中提供更多的訊息。這個細節可能不會引起一般開發者的注意，但對於開發工具或框架的維護者來說，它提供了更多的有用的資訊。

在早期版本中是使用 127.0.0.1，後來在 Vue 3.0 之後被改成 localhost，雖然對於大多數人來說，localhost 和 127.0.0.1 之間沒有太大的區別，但是我相信這個更改一定是有原因的，透過版控紀錄可以追到 GitHub 上的 issue 討論就能看到修改的原因。

最後，關於開發伺服器的 port 管理。如果你多次啟動開發伺服器，它會自動為每個 dev server 分配不同的 port 避免衝突。這個功能是通過檢查 port 是否被佔用然後再自動加 1 來實現的。如果你想強制使用特定的 port，你可以設置一個 strictPort 參數，這樣如果 port 被占用，伺服器會即報錯而不會嘗試其它 port。

總的來說，閱讀原始碼的過程雖然不會立即使你成為技術專家，但卻是一個有趣且有益的過程。它可以幫助你理解程式碼的工作方式、為什麽進行特定的更改，以及一些設計決策的背後原因。

在這個系列影片中，我們將繼續研究 Vite 的原始碼，希望可以更全面地了解 Vite 的運作原理。歡迎訂閱我的 Youtube 頻道，我們下集見！

參考資料：

• launch-editor-middleware https://www.npmjs.com/package/launch-editor-middleware
• 把 127.0.0.1 改成 localhost 的討論 https://github.com/vitejs/vite/pull/8543