將VITE添加到您現有的Web應用程序中

Vite，發音為“ Veet”，是現代的JavaScript Bundler，以其速度和易用性而聞名。這是一個強大的工具，需要最小的配置，但提供了廣泛的自定義選項。本文詳細介紹了將現有項目從另一個Bundler（例如WebPack）遷移到Vite。有關新項目，請參閱官方Vite文檔。即使對於遺產遷移，首先建議首先制定一個簡單的Vite項目，以更好地理解其結構。

從Webpack遷移到Vite

本指南反映了遷移一個長期，長期存在的Webpack項目的經驗。該過程突出了Vite在過渡過程中的配置功能。

不必要的WebPack配置

Vite固有地處理許多任務通常需要廣泛的WebPack配置。這消除了許多常見的WebPack插件和設置的需求。

靜態資產處理

WebPack通常需要顯式配置以加載靜態資產（圖像，字體等）：

{
  測試： /\ .(png| jpg| gif| svg| eot| woff| woff| woff2| ttf)qun/，
  使用： [
    {
      加載程序：“文件加載程序”
    }
  這是給出的
}

Vite自動管理此操作。

造型（CSS/SCSS）

WebPack的樣式配置可能很複雜：

{
  測試： /\ s？css$/，
  使用：[MinicsSextrackPlugin.Loader，“ CSS-LOADER”，“ SASS-LOADER”]
}，，

// 之後

新的MinicsSextractPlugin（{filename：“ [name]  -  [contenthash] .css“}），

Vite本地支持CSS和SCSS；只需安裝SASS，Vite處理其餘的即可。

轉卸（打字稿/JSX）

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文檔以獲取兼容性信息。

設置您的第一個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中文網其他相關文章！