源碼地址,目前版本是

image.png

image.png

image.png

vite 支持的配置

配置 Vite | Vite 官方中文文檔 (vitejs.dev)

啟動

image.png

image.png

image.png

dev

首先是sever文件下的createServer，先試整合配置文件vite.config.js 和 命令行里的配置到config中并對解析插件并排序抱完。

image.png

image.png

先處理httpserver的相關配置然后啟動一個http(s)server,并升級為websocket

image.png

image.png

使用 chokidar監(jiān)聽文件變化（這是進行熱更新的基礎）

image.png

• persistent:bollean,與原生fs.watch一樣,表示是否保護進程不退出持久監(jiān)聽，默認值為true
• ignored:string,所要忽略監(jiān)聽的文件或者文件夾
• ignoreInitial:bollean,表示是否對增加文件或者增加文件夾的時候進行發(fā)送事件，默認值為false表示add/addDir會觸發(fā)事件
• cwd:string類型蔚晨，沒有默認值握恳，類似于appBasepath紊选，監(jiān)聽的paths所相對的路徑。
• usePolling:bollean卸勺，表示是否使用前面提到的fs.watchFile()進行輪詢操作，由于輪詢會導致cpu飆升烫扼，所以此選項通常在需要通過網(wǎng)絡監(jiān)視文件的時候才設置為true即使用fs.watchFile()曙求，默認值為false
• depth:number類型,沒有默認值，如果設定則表示限定了會遞歸監(jiān)聽多少個子目錄映企。
• ignorePermissionErrors悟狱，忽略權限錯誤。
• disableGlobbing堰氓，如果為 true挤渐，所有 globs都被視為字面路徑名稱，即使它們具有特殊字符双絮。

根據(jù)container生成moduleGraph,然后將所有的plugin統(tǒng)一進行處理浴麻，保存到container中。

image.png

moduleGraph主要是將傳入的插件容器container掛載到this上囤攀，并初始化 4 個屬性urlToModuleMap软免、idToModuleMap、fileToModulesMap焚挠、safeModulesPath膏萧，Vite 為每個模塊創(chuàng)建一個ModuleNode對象，對象內包含模塊間的引用關系以及模塊信息。模塊信息包含絕對路徑向抢、轉換后的代碼认境、接收的熱更新模塊等。

image.png

• resolveUrl挟鸠，調用所有插件的resolveId鉤子函數(shù)叉信，根據(jù)當前被請求模塊的url，獲取該文件的絕對路徑艘希，最后返回[url, 文件絕對路徑]硼身。

• ensureEntryFromUrl，根據(jù)模塊路徑創(chuàng)建ModuleNode對象覆享，將對象收集到ModuleGraph的屬性中佳遂；最后返回這個對象。

  
  
  image.png
• onFileChange撒顿，根據(jù)傳入的file獲取并清空對應ModuleNode對象的transformResult屬性值丑罪。
• updateModuleInfo，用于構建和更新模塊之間的引用關系凤壁。

初始化后面要返回的vite-dev-server,綁定了一些屬性和方法

image.png

watcher發(fā)生變化的時候，進行相應的熱更新處理

image.png

執(zhí)行vite 鉤子 configureServer,這里postHooks只收集有configureServer的plugin

image.png

中間件的使用

image.png

• baseMiddleware拧抖，用來處理配置項中的 base 選項（開發(fā)或生產環(huán)境服務的公共基礎路徑）煤搜。我們的代碼在部署到生產環(huán)境時，一般會部署到某一個特定的目錄下唧席，這時訪問請求的 url 會帶上這個特定目錄的前綴擦盾，也就是這里的 base 選項。baseMiddleware 會刪除 base 前綴淌哟。
• servePublicMiddleware迹卢，響應 public 文件夾下的請求。vite 默認會將 public 文件夾下的文件當作項目根目錄下的文件绞绒，且不做任何轉義處理婶希。
• transformMiddleware，用來轉義處理 js蓬衡、ts喻杈、css、png 等資源文件狰晚，這是 vite 最核心的代碼實現(xiàn)筒饰。在這個中間件中會執(zhí)行 resolveId、load壁晒、transform 這三個鉤子函數(shù)瓷们。如果我們想對代碼做些什么，可以通過寫插件的方式實現(xiàn)這三個鉤子。
• serveStaticMiddleware谬晕，用來響應不需要轉義的的資源文件請求碘裕，比如頁面中的 img 標簽發(fā)出的圖片請求。
• indexHtmlMiddleware攒钳，用來處理 html 文件請求帮孔。

執(zhí)行posHooks里的plugins

image.png

幾個重要的插件：

• importAnalysisPlugin，實現(xiàn)了 transform 鉤子不撑，當請求的是 js 腳本時文兢，會通過 es-module-lexer 這個庫分析出所有 import 語句。如果是裸導入焕檬，就分析出這個裸導入真正要導入的文件地址姆坚，然后轉換為正確的導入 url。這個插件還會對 import.meta 進行增強实愚，實現(xiàn)一些標準沒有的功能兼呵，比如import.meta.hot。
• assetPlugin爆侣，實現(xiàn)了 load 鉤子萍程，讓我們可以在代碼中通過import imgUrl from './logo.png';的方式獲得資源的 url。通過 import 導入的 png 圖片兔仰，服務器不直接返回圖片的數(shù)據(jù)，而是返回一個 js 模塊蕉鸳，在模塊中通過 export default ${imgUrl}的方式導出要請求的圖片的 url乎赴。
• resolvePlugin潮尝，實現(xiàn)了 resolveId 鉤子榕吼，是一個比較重要的插件，用來轉換 url 為真實路徑勉失。importAnalysisPlugin 插件中獲取裸導入真正的文件地址的功能就是調用了這個插件實現(xiàn)的羹蚣。
• esbuildPlugin，實現(xiàn)了 transform 鉤子乱凿，使用 esbuild 將ts顽素、tsx 轉換為 js。

轉換index.html

image.png

在listen()之前執(zhí)行vite鉤子 buildStart徒蟆，和runOptimize(),進行啟動前的優(yōu)化胁出。然后返回server。

image.png

image.png