首頁 > web前端 > css教學 > 將VITE添加到您現有的Web應用程序中

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

Lisa Kudrow
發布: 2025-03-15 10:09:08
原創
238 人瀏覽過

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

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

從Webpack遷移到Vite

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

不必要的WebPack配置

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

靜態資產處理

WebPack通常需要顯式配置以加載靜態資產(圖像,字體等):

1

2

3

4

5

6

7

8

{

  測試: /\ .(png| jpg| gif| svg| eot| woff| woff| woff2| ttf)qun/,

  使用: [

    {

      加載程序:“文件加載程序”

    }

  這是給出的

}

登入後複製

Vite自動管理此操作。

造型(CSS/SCSS)

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

1

2

3

4

5

6

7

8

{

  測試: /\ s?css$/,

  使用:[MinicsSextrackPlugin.Loader,“ CSS-LOADER”,“ SASS-LOADER”]

},,

 

// 之後

 

新的MinicsSextractPlugin({filename:“ [name]  -  [contenthash] .css“}),

登入後複製

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

轉卸(打字稿/JSX)

WebPack需要用於打字稿和JSX的轉膠:

1

2

3

4

5

{

  測試: /\ .(tmer

  排除: /node_modules /,

  裝載機:“ babel-loader”

},,

登入後複製

...帶有相應的公告型配置。 Vite處理此開箱即用,支持現代JavaScript功能和打字稿。插件可用於較舊的瀏覽器支持。

節點模塊分辨率

WebPack需要明確的配置來解決node_modules

1

2

3

解決: {

  模塊:[path.resolve(“ ./ node_modules”)]]

}

登入後複製

Vite會自動處理此操作。

生產/開發模式

WebPack通常使用mode來區分環境:

1

模式:ISProd? “生產”:“發展”,

登入後複製

Vite使用單獨的命令( vite用於開發, vite build build for Production)。

文件擴展

WebPack通常需要指定文件擴展名:

1

2

3

解決: {

  擴展:[“ .ts”,“ .tsx”,“ .js”],

}

登入後複製

Vite會自動處理常見擴展。

滾動插件兼容性

許多滾動插件與Vite兼容,為現有插件提供了平穩的過渡。請諮詢Vite文檔以獲取兼容性信息。

設置您的第一個Vite項目

對於遷移現有項目,請從引用JavaScript條目文件的HTML輸入點(例如, index.html )開始。安裝必要的插件(例如, @vitejs/plugin-react用於React Projects)。創建一個vite.config.ts文件:

1

2

3

4

5

6

從“ vite”導入{decteConfig};

導入從“@vitejs/plugin-react”中導入反應;

 

導出默認decteConfig({

  插件:[react()]

});

登入後複製

添加NPM腳本:

1

2

3

“ dev”:“ vite”,

“構建”:“ Vite Build”,

“預覽”:“ Vite Preview”,

登入後複製

使用npm run dev啟動開發服務器。

高級配置:別名,環境變量和代理

別名

WebPack別名可以使用resolve.alias進行複制:Alias:

1

2

3

4

5

6

7

解決: {

  別名:{

    jscolor:path.resolve(“ ./ util/jscolor.js”),

    app:path.resolve(“ ./ app”),

    // ...更多別名

  }

},,

登入後複製

環境變量

Vite使用import.meta.env用於環境變量,通常以VITE_為前綴。對於舊版項目,可能需要一個自定義插件來處理現有process.env

服務器代理

對於在開發過程中替代後端服務的請求:

1

2

3

4

5

伺服器: {

  代理人: {

    “/graphQl”:“ http:// localhost:3001”

  }

}

登入後複製

建築圖書館

對於構建庫,請在vite.config.ts中配置build選項:(示例為簡潔,但類似於原始示例)

結論

Vite在Web應用程序開發方面提供了顯著改善,提供了速度和易用性。它的功能和與匯總插件的兼容性使現有項目相對簡單。

以上是將VITE添加到您現有的Web應用程序中的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板