一加Ace2 Pro真機揭曉 鈦空灰配色質感拉滿
終于，在經過了幾波預熱之后，一加Ace2 Pro的外觀真機圖在網上出現了。還是博主數碼閑聊站曝光的，這次的外觀設計還是延續了一加11的方案，只是細節上有了調整，例如新加入了鈦空灰
Vite 是最新的前端開發工具，其受歡迎程度和采用率都在大幅增長?？梢圆榭聪聢D中來自 npm trends 的下載。
trends
推動這一趨勢的是 Vite 核心的一個關鍵概念：開發人員體驗。與 Webpack 相比，Vite 在開發過程中能顯著縮短構建時間和熱重載時間。它通過利用瀏覽器中的 ES 模塊等現代瀏覽器功能來實現這一目標。
在我們深入探討從 Webpack 遷移到 Vite 的過程之前，值得注意的是，前端開發領域正在不斷發展，Vite 并不是唯一受到關注的工具。esbuild 是另一款速度驚人的 JavaScript 捆綁程序和精簡程序，正吸引著網絡開發人員的目光。如果你正在尋找一種零配置的方法，你可能還想了解一下 Parcel，它為許多開發人員提供了無縫體驗。
雖然 Vite 為你的工作流引入了許多令人興奮的新特性，但與任何新技術一樣，也有一些缺點需要考慮。與 Webpack 這樣成熟的工具相比，首先考慮的是第三方插件的生態系統。
在 Webpack 使用的十年間，npm 上有數十個核心/官方 Webpack 插件和數百（可能數千）個社區貢獻的插件。雖然 Vite 的插件支持非常好，但你可能會發現，項目所依賴的插件并沒有與 Vite 對應的插件，這可能會成為你遷移到 Vite 的障礙。
遷移項目的第一步是創建一個新的 Vite 應用程序，并探索要遷移到的工具。你可以用以下方法為新的 Vite 應用程序制作模板：
npm create vite@latest
npm create
然后開啟開發服務：
npm run dev現在，在瀏覽器中導航到顯示的 localhost URL。
localhost
Vite 將創建一個包含下圖所示的文件目錄。
Vite
其中許多內容你都不會陌生，可以在你的應用程序中進行類似替換。
要開始在現有 Webpack 項目中使用 Vite，請前往要遷移的 Webpack 項目的 package.json，然后安裝 Vite：
npm install –save vite根據你使用的前端框架，你可能還需要安裝特定的框架插件：
npm install –save @vitejs/plugin-react你還可以更新任何構建腳本，使用 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現在再來試試新的開發腳本吧！
npm run dev除非你非常幸運，否則很可能需要添加一些額外的配置。Vite 使用 vite.config.js 文件進行配置，這在很大程度上類似于現有的 webpack.config.js 文件。
你可以在 vitejs.dev 上找到 Vite 配置的完整文檔，但 React 應用程序的簡單 Vite 配置可能如下所示：
import { defineConfig } from 'vite'import react from '@vitejs/plugin-react'export default defineConfig({ plugins: [react()], },})在插件內部，Vite 使用 Rollup 作為構建工具，你可以通過 npm 安裝任何 Rollup 插件，將其添加到 Vite 中：
npm install –save @rollup/plugin-image同時將它們添加到 vite.config.js 文件的plugins數組中：
// vite.config.jsimport image from '@rollup/plugin-image'import { defineConfig } from 'vite'export default defineConfig({ plugins: [ image(), ],})接下來看看一些流行的Webpack插件和等價的Vite插件。
HtmlWebpackPlugin 可簡化 HTML 文件的創建，以便為 Webpack 捆綁包提供服務。如果你在項目中使用 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 文件創建一個 CSS 文件。它通常用于生產環境，以提高 CSS 的加載效率。這樣做有兩個好處。首先，瀏覽器可以單獨緩存 CSS。其次，由于 CSS 不再嵌入 JavaScript 文件中，因此可以與 JavaScript 同步加載，從而加快頁面加載速度，防止出現沒有樣式的文本。
在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 也有一個類似的插件，名為 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 用于在編譯時用分配值替換源代碼中的標記。這樣就可以創建可在編譯時配置的全局常量。在 Vite 中，你可以使用 vite.config.js 中的 define 選項實現同樣的效果，因此可能不需要插件：
export default defineConfig({ define: { 'process.env.NODE_ENV': JSON.stringify('production'), },})這是一份將前端 Webpack 應用程序遷移到 Vite 的簡單指南，其中包括一些最常用的 Webpack 插件。
如果你的項目是一個大型復雜項目，構建過程錯綜復雜，Webpack 功能豐富、配置靈活，可能仍然是你的最佳選擇。
如果你遷移的是一個較小或中等規模的項目，Vite 確實能提供一些便利。無論是服務器啟動還是熱模塊替換，它的速度都能顯著提高開發效率。其配置的簡潔性也是一個受歡迎的優勢，而且它在設計時考慮到了原生 ES 模塊和現代框架的兼容性，這為它的未來發展奠定了良好的基礎。
從 Webpack 過渡到 Vite 確實需要仔細規劃和測試，尤其是在考慮插件替換或重構時。但這一舉措也會帶來可觀的回報。Vite 提供了一個更快、更精簡的開發環境，最終能帶來更順暢、更高效的開發工作流程。
時刻關注工具的發展變化總是有益的。也可以考慮探索其他現代工具，如 esbuild 和 Parcel，以找到最適合你項目需求的工具。
請記住，工具并不是最重要的，重要的是如何使用它來實現目標。Webpack、Vite、esbuild 和 Parcel 都是優秀的工具，至于使用哪種工具最好，則取決于你的具體需求和限制條件。
本文譯自：https://www.sitepoint.com/webpack-vite-migration/
本文鏈接：http://www.www897cc.com/showinfo-26-39545-0.html一篇學會如何從Webpack遷移到Vite
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 聊一聊對一個 C# 商業程序的反反調試
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號