Vite 是最新的前端開發(fā)工具，其受歡迎程度和采用率都在大幅增長?？梢圆榭聪聢D中來自 npm trends 的下載。

trends

推動這一趨勢的是 Vite 核心的一個關(guān)鍵概念：開發(fā)人員體驗。與 Webpack 相比，Vite 在開發(fā)過程中能顯著縮短構(gòu)建時間和熱重載時間。它通過利用瀏覽器中的 ES 模塊等現(xiàn)代瀏覽器功能來實現(xiàn)這一目標(biāo)。

在我們深入探討從 Webpack 遷移到 Vite 的過程之前，值得注意的是，前端開發(fā)領(lǐng)域正在不斷發(fā)展，Vite 并不是唯一受到關(guān)注的工具。esbuild 是另一款速度驚人的 JavaScript 捆綁程序和精簡程序，正吸引著網(wǎng)絡(luò)開發(fā)人員的目光。如果你正在尋找一種零配置的方法，你可能還想了解一下 Parcel，它為許多開發(fā)人員提供了無縫體驗。

注意事項

雖然 Vite 為你的工作流引入了許多令人興奮的新特性，但與任何新技術(shù)一樣，也有一些缺點需要考慮。與 Webpack 這樣成熟的工具相比，首先考慮的是第三方插件的生態(tài)系統(tǒng)。

在 Webpack 使用的十年間，npm 上有數(shù)十個核心/官方 Webpack 插件和數(shù)百（可能數(shù)千）個社區(qū)貢獻的插件。雖然 Vite 的插件支持非常好，但你可能會發(fā)現(xiàn)，項目所依賴的插件并沒有與 Vite 對應(yīng)的插件，這可能會成為你遷移到 Vite 的障礙。

安裝Vite

遷移項目的第一步是創(chuàng)建一個新的 Vite 應(yīng)用程序，并探索要遷移到的工具。你可以用以下方法為新的 Vite 應(yīng)用程序制作模板：

npm create vite@latest

npm create

然后開啟開發(fā)服務(wù)：

npm run dev

現(xiàn)在，在瀏覽器中導(dǎo)航到顯示的 localhost URL。

localhost

Vite 將創(chuàng)建一個包含下圖所示的文件目錄。

Vite

其中許多內(nèi)容你都不會陌生，可以在你的應(yīng)用程序中進行類似替換。

更改package.json

要開始在現(xiàn)有 Webpack 項目中使用 Vite，請前往要遷移的 Webpack 項目的 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",

同時，卸載Webpack：

npm uninstall –save webpack webpack-cli wepack-dev-server

現(xiàn)在再來試試新的開發(fā)腳本吧！

npm run dev

vite.config

除非你非常幸運，否則很可能需要添加一些額外的配置。Vite 使用 vite.config.js 文件進行配置，這在很大程度上類似于現(xiàn)有的 webpack.config.js 文件。

你可以在 vitejs.dev 上找到 Vite 配置的完整文檔，但 React 應(yīng)用程序的簡單 Vite 配置可能如下所示：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  },
})

插件

在插件內(nèi)部，Vite 使用 Rollup 作為構(gòu)建工具，你可以通過 npm 安裝任何 Rollup 插件，將其添加到 Vite 中：

npm install –save @rollup/plugin-image

同時將它們添加到 vite.config.js 文件的plugins數(shù)組中：

// vite.config.js
import image from '@rollup/plugin-image'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
      image(),
  ],
})

等價Vite插件

接下來看看一些流行的Webpack插件和等價的Vite插件。

HtmlWebpackPlugin -> vite-plugin-html

HtmlWebpackPlugin 可簡化 HTML 文件的創(chuàng)建，以便為 Webpack 捆綁包提供服務(wù)。如果你在項目中使用 HtmlWebpackPlugin，Vite 的 vite-plugin-html 插件也能提供類似功能。你可以這樣安裝：

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 的一個插件，用于將 CSS 提取到單獨的文件中。它會為每個包含 CSS 的 JavaScript 文件創(chuàng)建一個 CSS 文件。它通常用于生產(chǎn)環(huán)境，以提高 CSS 的加載效率。這樣做有兩個好處。首先，瀏覽器可以單獨緩存 CSS。其次，由于 CSS 不再嵌入 JavaScript 文件中，因此可以與 JavaScript 同步加載，從而加快頁面加載速度，防止出現(xiàn)沒有樣式的文本。

在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 用于將單個文件或整個目錄復(fù)制到構(gòu)建目錄。Vite 也有一個類似的插件，名為 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 用于在編譯時用分配值替換源代碼中的標(biāo)記。這樣就可以創(chuàng)建可在編譯時配置的全局常量。在 Vite 中，你可以使用 vite.config.js 中的 define 選項實現(xiàn)同樣的效果，因此可能不需要插件：

export default defineConfig({
  define: {
    'process.env.NODE_ENV': JSON.stringify('production'),
  },
})

總結(jié)

這是一份將前端 Webpack 應(yīng)用程序遷移到 Vite 的簡單指南，其中包括一些最常用的 Webpack 插件。

如果你的項目是一個大型復(fù)雜項目，構(gòu)建過程錯綜復(fù)雜，Webpack 功能豐富、配置靈活，可能仍然是你的最佳選擇。

如果你遷移的是一個較小或中等規(guī)模的項目，Vite 確實能提供一些便利。無論是服務(wù)器啟動還是熱模塊替換，它的速度都能顯著提高開發(fā)效率。其配置的簡潔性也是一個受歡迎的優(yōu)勢，而且它在設(shè)計時考慮到了原生 ES 模塊和現(xiàn)代框架的兼容性，這為它的未來發(fā)展奠定了良好的基礎(chǔ)。

從 Webpack 過渡到 Vite 確實需要仔細規(guī)劃和測試，尤其是在考慮插件替換或重構(gòu)時。但這一舉措也會帶來可觀的回報。Vite 提供了一個更快、更精簡的開發(fā)環(huán)境，最終能帶來更順暢、更高效的開發(fā)工作流程。

時刻關(guān)注工具的發(fā)展變化總是有益的。也可以考慮探索其他現(xiàn)代工具，如 esbuild 和 Parcel，以找到最適合你項目需求的工具。

請記住，工具并不是最重要的，重要的是如何使用它來實現(xiàn)目標(biāo)。Webpack、Vite、esbuild 和 Parcel 都是優(yōu)秀的工具，至于使用哪種工具最好，則取決于你的具體需求和限制條件。

本文譯自：https://www.sitepoint.com/webpack-vite-migration/