一篇學(xué)會(huì)如何從Webpack遷移到Vite
Vite 是最新的前端開(kāi)發(fā)工具，其受歡迎程度和采用率都在大幅增長(zhǎng)?？梢圆榭聪聢D中來(lái)自 npm trends 的下載。
trends
推動(dòng)這一趨勢(shì)的是 Vite 核心的一個(gè)關(guān)鍵概念：開(kāi)發(fā)人員體驗(yàn)。與 Webpack 相比，Vite 在開(kāi)發(fā)過(guò)程中能顯著縮短構(gòu)建時(shí)間和熱重載時(shí)間。它通過(guò)利用瀏覽器中的 ES 模塊等現(xiàn)代瀏覽器功能來(lái)實(shí)現(xiàn)這一目標(biāo)。
在我們深入探討從 Webpack 遷移到 Vite 的過(guò)程之前，值得注意的是，前端開(kāi)發(fā)領(lǐng)域正在不斷發(fā)展，Vite 并不是唯一受到關(guān)注的工具。esbuild 是另一款速度驚人的 JavaScript 捆綁程序和精簡(jiǎn)程序，正吸引著網(wǎng)絡(luò)開(kāi)發(fā)人員的目光。如果你正在尋找一種零配置的方法，你可能還想了解一下 Parcel，它為許多開(kāi)發(fā)人員提供了無(wú)縫體驗(yàn)。
注意事項(xiàng)
雖然 Vite 為你的工作流引入了許多令人興奮的新特性，但與任何新技術(shù)一樣，也有一些缺點(diǎn)需要考慮。與 Webpack 這樣成熟的工具相比，首先考慮的是第三方插件的生態(tài)系統(tǒng)。
在 Webpack 使用的十年間，npm 上有數(shù)十個(gè)核心/官方 Webpack 插件和數(shù)百（可能數(shù)千）個(gè)社區(qū)貢獻(xiàn)的插件。雖然 Vite 的插件支持非常好，但你可能會(huì)發(fā)現(xiàn)，項(xiàng)目所依賴的插件并沒(méi)有與 Vite 對(duì)應(yīng)的插件，這可能會(huì)成為你遷移到 Vite 的障礙。
安裝Vite
遷移項(xiàng)目的第一步是創(chuàng)建一個(gè)新的 Vite 應(yīng)用程序，并探索要遷移到的工具。你可以用以下方法為新的 Vite 應(yīng)用程序制作模板：
npm create vite@latest
npm create
然后開(kāi)啟開(kāi)發(fā)服務(wù)：
npm run dev現(xiàn)在，在瀏覽器中導(dǎo)航到顯示的 localhost URL。
localhost
Vite 將創(chuàng)建一個(gè)包含下圖所示的文件目錄。
Vite
其中許多內(nèi)容你都不會(huì)陌生，可以在你的應(yīng)用程序中進(jìn)行類(lèi)似替換。
更改package.json
要開(kāi)始在現(xiàn)有 Webpack 項(xiàng)目中使用 Vite，請(qǐng)前往要遷移的 Webpack 項(xiàng)目的 package.json，然后安裝 Vite：
npm install –save vite根據(jù)你使用的前端框架，你可能還需要安裝特定的框架插件：
npm install –save @vitejs/plugin-react你還可以更新任何構(gòu)建腳本，使用 Vite 代替 Webpack：
– "build": "webpack --mode production",
– "dev": "webpack serve",
++ "build": "vite build",
++ "dev": "vite serve",同時(shí)，卸載Webpack：
npm uninstall –save webpack webpack-cli wepack-dev-server現(xiàn)在再來(lái)試試新的開(kāi)發(fā)腳本吧！
npm run devvite.config
除非你非常幸運(yùn)，否則很可能需要添加一些額外的配置。Vite 使用 vite.config.js 文件進(jìn)行配置，這在很大程度上類(lèi)似于現(xiàn)有的 webpack.config.js 文件。
你可以在 vitejs.dev 上找到 Vite 配置的完整文檔，但 React 應(yīng)用程序的簡(jiǎn)單 Vite 配置可能如下所示：
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
},
})插件
在插件內(nèi)部，Vite 使用 Rollup 作為構(gòu)建工具，你可以通過(guò) npm 安裝任何 Rollup 插件，將其添加到 Vite 中：
npm install –save @rollup/plugin-image同時(shí)將它們添加到 vite.config.js 文件的plugins數(shù)組中：
// vite.config.js
import image from '@rollup/plugin-image'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
image(),
],
})等價(jià)Vite插件
接下來(lái)看看一些流行的Webpack插件和等價(jià)的Vite插件。
HtmlWebpackPlugin -> vite-plugin-html
HtmlWebpackPlugin 可簡(jiǎn)化 HTML 文件的創(chuàng)建，以便為 Webpack 捆綁包提供服務(wù)。如果你在項(xiàng)目中使用 HtmlWebpackPlugin，Vite 的 vite-plugin-html 插件也能提供類(lèi)似功能。你可以這樣安裝：
npm install --save-dev vite-plugin-html在vite.config.js中這樣引入：
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { createHtmlPlugin } from 'vite-plugin-html'
export default defineConfig({
plugins: [
react(),
createHtmlPlugin({
entry: 'src/main.js',
template: 'public/index.html',
inject: {
data: {
title: 'index',
injectScript: `<script src="./inject.js"></script>`,
},
})
]
})MiniCssExtractPlugin -> vite-plugin-purgecss
MiniCssExtractPlugin 是 Webpack 的一個(gè)插件，用于將 CSS 提取到單獨(dú)的文件中。它會(huì)為每個(gè)包含 CSS 的 JavaScript 文件創(chuàng)建一個(gè) CSS 文件。它通常用于生產(chǎn)環(huán)境，以提高 CSS 的加載效率。這樣做有兩個(gè)好處。首先，瀏覽器可以單獨(dú)緩存 CSS。其次，由于 CSS 不再嵌入 JavaScript 文件中，因此可以與 JavaScript 同步加載，從而加快頁(yè)面加載速度，防止出現(xiàn)沒(méi)有樣式的文本。
在Vite中，可以使用vite-plugin-purgecss：
npm install --save-dev vite-plugin-html-purgecss在vite.config.js中這么使用：
import htmlPurge from 'vite-plugin-html-purgecss'
export default {
plugins: [
htmlPurge(),
]
}CopyWebpackPlugin -> vite-plugin-static-copy
CopyWebpackPlugin 用于將單個(gè)文件或整個(gè)目錄復(fù)制到構(gòu)建目錄。Vite 也有一個(gè)類(lèi)似的插件，名為 vite-plugin-static-copy：
npm install --save-dev vite-plugin-static-copy將下列代碼放入vite.config.js：
import { viteStaticCopy } from 'vite-plugin-static-copy'
export default {
plugins: [
viteStaticCopy({
targets: [
{
src: 'bin/example.wasm',
dest: 'wasm-files'
}
]
})
]
}DefinePlugin -> define()
在 Webpack 中，DefinePlugin 用于在編譯時(shí)用分配值替換源代碼中的標(biāo)記。這樣就可以創(chuàng)建可在編譯時(shí)配置的全局常量。在 Vite 中，你可以使用 vite.config.js 中的 define 選項(xiàng)實(shí)現(xiàn)同樣的效果，因此可能不需要插件：
export default defineConfig({
define: {
'process.env.NODE_ENV': JSON.stringify('production'),
},
})總結(jié)
這是一份將前端 Webpack 應(yīng)用程序遷移到 Vite 的簡(jiǎn)單指南，其中包括一些最常用的 Webpack 插件。
如果你的項(xiàng)目是一個(gè)大型復(fù)雜項(xiàng)目，構(gòu)建過(guò)程錯(cuò)綜復(fù)雜，Webpack 功能豐富、配置靈活，可能仍然是你的最佳選擇。
如果你遷移的是一個(gè)較小或中等規(guī)模的項(xiàng)目，Vite 確實(shí)能提供一些便利。無(wú)論是服務(wù)器啟動(dòng)還是熱模塊替換，它的速度都能顯著提高開(kāi)發(fā)效率。其配置的簡(jiǎn)潔性也是一個(gè)受歡迎的優(yōu)勢(shì)，而且它在設(shè)計(jì)時(shí)考慮到了原生 ES 模塊和現(xiàn)代框架的兼容性，這為它的未來(lái)發(fā)展奠定了良好的基礎(chǔ)。
從 Webpack 過(guò)渡到 Vite 確實(shí)需要仔細(xì)規(guī)劃和測(cè)試，尤其是在考慮插件替換或重構(gòu)時(shí)。但這一舉措也會(huì)帶來(lái)可觀的回報(bào)。Vite 提供了一個(gè)更快、更精簡(jiǎn)的開(kāi)發(fā)環(huán)境，最終能帶來(lái)更順暢、更高效的開(kāi)發(fā)工作流程。
時(shí)刻關(guān)注工具的發(fā)展變化總是有益的。也可以考慮探索其他現(xiàn)代工具，如 esbuild 和 Parcel，以找到最適合你項(xiàng)目需求的工具。
請(qǐng)記住，工具并不是最重要的，重要的是如何使用它來(lái)實(shí)現(xiàn)目標(biāo)。Webpack、Vite、esbuild 和 Parcel 都是優(yōu)秀的工具，至于使用哪種工具最好，則取決于你的具體需求和限制條件。
本文譯自：https://www.sitepoint.com/webpack-vite-migration/
