影音體驗是真的強 簡單聊聊iQOO Pad
大公司的好處就是產(chǎn)品線豐富，非常細分化的東西也能給你做出來，例如早先我們看到了新的vivo Pad2，之后我們又在iQOO Neo8 Pro的發(fā)布會上看到了iQOO的首款平板產(chǎn)品iQOO Pad。雖
Vite 是最新的前端開發(fā)工具，其受歡迎程度和采用率都在大幅增長。可以查看下圖中來自 npm trends 的下載。
trends
推動這一趨勢的是 Vite 核心的一個關(guān)鍵概念：開發(fā)人員體驗。與 Webpack 相比，Vite 在開發(fā)過程中能顯著縮短構(gòu)建時間和熱重載時間。它通過利用瀏覽器中的 ES 模塊等現(xiàn)代瀏覽器功能來實現(xiàn)這一目標。
在我們深入探討從 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 的障礙。
遷移項目的第一步是創(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)用程序中進行類似替換。
要開始在現(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 使用 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.jsimport image from '@rollup/plugin-image'import { defineConfig } from 'vite'export default defineConfig({ plugins: [ image(), ],})接下來看看一些流行的Webpack插件和等價的Vite插件。
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 是 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 用于將單個文件或整個目錄復(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' } ] }) ]}在 Webpack 中，DefinePlugin 用于在編譯時用分配值替換源代碼中的標記。這樣就可以創(chuàng)建可在編譯時配置的全局常量。在 Vite 中，你可以使用 vite.config.js 中的 define 選項實現(xiàn)同樣的效果，因此可能不需要插件：
export default defineConfig({ define: { 'process.env.NODE_ENV': JSON.stringify('production'), },})這是一份將前端 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)目標。Webpack、Vite、esbuild 和 Parcel 都是優(yōu)秀的工具，至于使用哪種工具最好，則取決于你的具體需求和限制條件。
本文譯自：https://www.sitepoint.com/webpack-vite-migration/
本文鏈接：http://www.www897cc.com/showinfo-26-39545-0.html一篇學會如何從Webpack遷移到Vite
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號