Vite,發音為“ Veet”,是現代的JavaScript Bundler,以其速度和易用性而聞名。這是一個強大的工具,需要最小的配置,但提供了廣泛的自定義選項。本文詳細介紹了將現有項目從另一個Bundler(例如WebPack)遷移到Vite。有關新項目,請參閱官方Vite文檔。即使對於遺產遷移,首先建議首先制定一個簡單的Vite項目,以更好地理解其結構。
本指南反映了遷移一個長期,長期存在的Webpack項目的經驗。該過程突出了Vite在過渡過程中的配置功能。
Vite固有地處理許多任務通常需要廣泛的WebPack配置。這消除了許多常見的WebPack插件和設置的需求。
WebPack通常需要顯式配置以加載靜態資產(圖像,字體等):
{ 測試: /\ .(png| jpg| gif| svg| eot| woff| woff| woff2| ttf)qun/, 使用: [ { 加載程序:“文件加載程序” } 這是給出的 }
Vite自動管理此操作。
WebPack的樣式配置可能很複雜:
{ 測試: /\ s?css$/, 使用:[MinicsSextrackPlugin.Loader,“ CSS-LOADER”,“ SASS-LOADER”] },, // 之後 新的MinicsSextractPlugin({filename:“ [name] - [contenthash] .css“}),
Vite本地支持CSS和SCSS;只需安裝SASS,Vite處理其餘的即可。
WebPack需要用於打字稿和JSX的轉膠:
{ 測試: /\ .(tmer 排除: /node_modules /, 裝載機:“ babel-loader” },,
...帶有相應的公告型配置。 Vite處理此開箱即用,支持現代JavaScript功能和打字稿。插件可用於較舊的瀏覽器支持。
WebPack需要明確的配置來解決node_modules
:
解決: { 模塊:[path.resolve(“ ./ node_modules”)]] }
Vite會自動處理此操作。
WebPack通常使用mode
來區分環境:
模式:ISProd? “生產”:“發展”,
Vite使用單獨的命令( vite
用於開發, vite build
build for Production)。
WebPack通常需要指定文件擴展名:
解決: { 擴展:[“ .ts”,“ .tsx”,“ .js”], }
Vite會自動處理常見擴展。
許多滾動插件與Vite兼容,為現有插件提供了平穩的過渡。請諮詢Vite文檔以獲取兼容性信息。
對於遷移現有項目,請從引用JavaScript條目文件的HTML輸入點(例如, index.html
)開始。安裝必要的插件(例如, @vitejs/plugin-react
用於React Projects)。創建一個vite.config.ts
文件:
從“ vite”導入{decteConfig}; 導入從“@vitejs/plugin-react”中導入反應; 導出默認decteConfig({ 插件:[react()] });
添加NPM腳本:
“ dev”:“ vite”, “構建”:“ Vite Build”, “預覽”:“ Vite Preview”,
使用npm run dev
啟動開發服務器。
WebPack別名可以使用resolve.alias
進行複制:Alias:
解決: { 別名:{ jscolor:path.resolve(“ ./ util/jscolor.js”), app:path.resolve(“ ./ app”), // ...更多別名 } },,
Vite使用import.meta.env
用於環境變量,通常以VITE_
為前綴。對於舊版項目,可能需要一個自定義插件來處理現有process.env
。
對於在開發過程中替代後端服務的請求:
伺服器: { 代理人: { “/graphQl”:“ http:// localhost:3001” } }
對於構建庫,請在vite.config.ts
中配置build
選項:(示例為簡潔,但類似於原始示例)
Vite在Web應用程序開發方面提供了顯著改善,提供了速度和易用性。它的功能和與匯總插件的兼容性使現有項目相對簡單。
以上是將VITE添加到您現有的Web應用程序中的詳細內容。更多資訊請關注PHP中文網其他相關文章!