1. 整體架構設計
Vite 的整體架構由幾個關鍵模塊組成,每個模塊都對應具體的源碼文件:
-
開發服務器:用于處理瀏覽器請求、模塊解析和熱更新。開發服務器的代碼主要位于 src/node/server/index.ts。
-
模塊解析與熱更新:通過模塊中間件攔截請求,處理代碼轉換與熱模塊替換。相關代碼在 src/node/server/middlewares/moduleRewrite.ts 和 src/node/server/hmr.ts 中。
-
構建工具鏈:在生產環境下使用 Rollup 進行打包構建。構建相關的邏輯主要在 src/node/build.ts 中。
-
插件系統:Vite 擁有插件機制,允許擴展功能,插件系統的核心邏輯位于 src/node/plugins/index.ts。
2. 核心源碼細節與對應文件
2.1. 開發服務器
Vite 的開發服務器是基于 Node 的原生 http 模塊構建的。相關代碼位于 src/node/server/index.ts 。
-
啟動 HTTP 服務器:createServer 函數是啟動開發服務器的入口,它調用 Node 的 http.createServer 來創建 HTTP 服務器,并注冊中間件以處理各種請求。
-
處理請求:sr