特征

在最基本的層次上，使用Vite進(jìn)行開發(fā)與使用靜態(tài)文件服務(wù)器沒有太大區(qū)別。但是，Vite對(duì)本機(jī)ESM導(dǎo)入提供了許多增強(qiáng)功能，以支持通常在基于捆綁程序的設(shè)置中常見的各種功能。

NPM依賴關(guān)系解析和預(yù)捆綁

原生ES導(dǎo)入不支持如下所示的裸模塊導(dǎo)入:

import?{?someMethod?}?from?'my-dep'

上面的操作將在瀏覽器中拋出一個(gè)錯(cuò)誤。Vite將在所有服務(wù)的源文件中檢測(cè)此類裸模塊導(dǎo)入，并執(zhí)行以下操作:

• 預(yù)捆綁它們以提高頁(yè)面加載速度，并將CommonJS / UMD模塊轉(zhuǎn)換為ESM。預(yù)綁定步驟是用esbuild執(zhí)行的，這使得Vite的冷啟動(dòng)時(shí)間比任何基于javascript的綁定程序都要快得多。

• 重寫導(dǎo)入到有效的url，如/node_modules/.vite/my- depj .js?v=f3sf2ebd，以便瀏覽器能正確導(dǎo)入。

依賴項(xiàng)被強(qiáng)緩存

Vite通過HTTP頭緩存依賴請(qǐng)求，所以如果你想在本地編輯/調(diào)試依賴，請(qǐng)遵循這里的步驟。

熱模塊替換

Vite通過本地ESM提供了HMR API。具有HMR功能的框架可以利用API提供即時(shí)、準(zhǔn)確的更新，而無需重新加載頁(yè)面或刪除應(yīng)用程序狀態(tài)。Vite為Vue單文件組件提供第一方HMR集成，并快速響應(yīng)刷新。還有通過@prefresh/vite對(duì)Preact的官方集成。

注意，您不需要手動(dòng)設(shè)置這些-當(dāng)您通過@vitejs/create-app創(chuàng)建應(yīng)用程序時(shí)，所選模板將為您預(yù)先配置這些。

TypeScript

Vite支持直接導(dǎo)入.ts文件。

Vite只對(duì).ts文件執(zhí)行翻譯，不執(zhí)行類型檢查。它假設(shè)類型檢查由IDE和構(gòu)建過程負(fù)責(zé)(可以在構(gòu)建腳本中運(yùn)行tsc——noEmit)。

Vite使用esbuild將TypeScript轉(zhuǎn)換為JavaScript，比普通tsc快20~30倍，HMR更新可以在50毫秒內(nèi)反映到瀏覽器中。

請(qǐng)注意，因?yàn)閑sbuild只執(zhí)行不帶類型信息的轉(zhuǎn)換，所以它不支持某些特性，如const enum和隱式的純類型導(dǎo)入。你必須在tsconfig中設(shè)置"isolatedModules": true。這樣TS就會(huì)對(duì)那些不能與單獨(dú)的翻譯一起工作的特性發(fā)出警告。

客戶端類型

Vite的默認(rèn)類型是Node.js API。要在Vite應(yīng)用程序中緩沖客戶端代碼環(huán)境，請(qǐng)?zhí)砑覸ite/client到compilerOptions.tsconfig的類型:

{
??"compilerOptions":?{
????"types":?["vite/client"]
??}
}

這將提供以下類型的墊片:

• 資產(chǎn)導(dǎo)入(例如導(dǎo)入.svg文件)

• import.meta.env上導(dǎo)入的env變量的類型

• import.meta.hot上的HMR API的類型

Vue

Vite提供一流的Vue支持:

• 通過@vitejs/plugin-vue支持Vue 3 SFC

• 通過@vitejs/plugin-vue-jsx支持Vue 3 JSX

• 通過underfin/vite-plugin-vue2支持Vue 2

JSX

.jsx和.tsx文件也支持開箱即用。JSX編譯也通過ESBuild處理，默認(rèn)使用React 16風(fēng)格。這里跟蹤ESBuild中React 17風(fēng)格的JSX支持。

Vue用戶應(yīng)該使用官方的@vitejs/plugin- Vue -jsx插件，該插件提供了Vue 3特有的特性，包括HMR、全局組件解析、指令和插槽。

如果沒有將JSX與React或Vue一起使用，可以使用esbuild選項(xiàng)配置自定義jsxFactory和jsxFragment。例如Preact:

//?vite.config.js
export?default?{
??esbuild:?{
????jsxFactory:?'h',
????jsxFragment:?'Fragment'
??}
}

更多細(xì)節(jié)在ESBuild文檔中。

你可以使用jsxInject(這是唯一的vite選項(xiàng))注入JSX helper，以避免手動(dòng)導(dǎo)入:

//?vite.config.js
export?default?{
??esbuild:?{
????jsxInject:?`import?React?from?'react'`
??}
}

CSS

導(dǎo)入.css文件將通過帶有HMR支持的

<b id="afajh"><abbr id="afajh"></abbr></b>