Vite基于原生 ESM 的 Web 開發(fā)構(gòu)建工具

vite 是一個(gè)由原生 ESM 驅(qū)動(dòng)的 Web 開發(fā)構(gòu)建工具。在開發(fā)環(huán)境下基于瀏覽器原生 ES imports 開發(fā)，在生產(chǎn)環(huán)境下基于 Rollup 打包。

vite 作用

• 快速的冷啟動(dòng)：不需要等待打包操作；
• 即時(shí)的熱模塊更新：替換性能和模塊數(shù)量的解耦讓更新飛起；
• 真正的按需編譯：不再等待整個(gè)應(yīng)用編譯完成，這是一個(gè)巨大的改變。

vite 功能實(shí)現(xiàn)

• 提供 web server：借用了 koa 來啟動(dòng)服務(wù)
• 模塊解析：核心是攔截瀏覽器對(duì)模塊的請(qǐng)求
• 支持 /@module/ ：判斷路徑是否以 /@module/ 開頭，如果是取出包名，去 node_module 里找到這個(gè)庫，基于 package.json 返回對(duì)應(yīng)的內(nèi)容
• 文件編譯：攔截了對(duì)模塊的請(qǐng)求并執(zhí)行實(shí)時(shí)編譯

vite 運(yùn)行原理

• 在瀏覽器端使用 export、import 的方式導(dǎo)入和導(dǎo)出模塊，在 script 標(biāo)簽里設(shè)置 type="module" （ ES Modules 目前主流的瀏覽器都已經(jīng)支持）。