wp2vite的妙用，讓webpack項目支援vite

在浏覽器支援 ES 子產品之前，JavaScript 并沒有提供的原生機制讓開發者以子產品化的方式進行開發。這也正是我們對 “打包” 這個概念熟悉的原因：使用工具抓取、處理并将我們的源碼子產品串聯成可以在浏覽器中運作的檔案。

時過境遷，我們見證了諸如 webpack、Rollup 和 Parcel 等工具的變遷，它們極大地改善了前端開發者的開發體驗。

然而，當我們開始建構越來越大型的應用時，需要處理的 JavaScript 代碼量也呈指數級增長。包含數千個子產品的大型項目相當普遍。

我們開始遇到性能瓶頸 —— 使用 JavaScript 開發的工具通常需要很長時間（甚至是幾分鐘！）才能啟動開發伺服器，即使使用 HMR，檔案修改後的效果也需要幾秒鐘才能在浏覽器中反映出來。如此循環往複，遲鈍的回報會極大地影響開發者的開發效率和幸福感。

Vite 旨在利用生态系統中的新進展解決上述問題：浏覽器開始原生支援 ES 子產品，且越來越多 JavaScript 工具使用編譯型語言編寫。

wp2vite介紹

首先介紹一下今天的主角，這是一個指令行工具、自動化工具。

工具的作用是一鍵讓使用webpack來進行開發和建構的項目支援使用vite來進行開發和建構。

不過對于一個前端er來說，預設你們是知道webpack的；如果你不知道vite的話，建議了解一下，号稱是下一代前端開發與建構工具。

在前段時間對wp2vite做了一次重構的更新，把之前的分情況處理改為了流式的處理;

第一版的wp2vite是先對項目進行判斷，react項目走react的流程，vue的項目走vue的流程；

第二版的wp2vite是流式，一條線完成，不分項目，這樣的好處是邏輯更加清晰、代碼複用性更強；

wp2vite 第一版時僅對react項目進行了良好的支援，vue項目支援力度非常低；第二版在支援react項目的基礎上，對vue項目的支援力度更加友好，

同時因為是流式的渲染，即使不是react項目和vue項目，wp2vite也會為你的項目轉為vite提供支援。

安裝與使用

關于wp2vite的安裝，與其他指令行工具安裝是一樣的：

npm install -g wp2vite
or
yarn global add wp2vite           

使用的話，其實是非常簡單的，一個特别特别簡單的工具，沒有那麼多配置檔案，也沒有那麼長的指令行；

// 進到你的使用webpack開發和建構的項目的目錄
cd your_workspace/your_project
// 執行wp2vite的指令行
wp2vite 
or 
wp2vite --config=./webpack.config.js // 傳遞配置檔案

wp2vite -v // 檢視版本           

待wp2vite指令執行完後，進行安裝依賴和啟動項目

// 安裝依賴
npm install

// 啟動項目
npm run dev // 如果原先你的項目有dev script，請執行下面的指令
or
npm run vite-start           

關于實作

簡單說下關于wp2vite的實作，使用的指令行工具是cac，使用的美化輸出工具是chalk,其他的基本就沒有了。下面我們簡單說下步驟：

首先會根據你的項目進行分析，包括package.json檔案裡面的依賴、node_modules下面的檔案等，擷取目前項目的一些環境資訊(env)，包括但不限于isReact、isVue、isVue2、isVue3等。

根據上面擷取到的項目資訊，項目類型等擷取項目的webpack的配置；

此處坑較多，因為不同的腳手架建立的項目webpack配置的路徑不一樣；而因為前端卷的厲害，是以各種建立項目的輪子層出不窮；

同時還因為腳手架版本的不同，配置檔案的擷取方式也會有所不同，是以此處浪費了很長的時間去研究各種腳手架的源碼，搭配mock函數擷取到webpack的配置；

解析上面擷取到的環境資訊和webpack的配置資訊，對此資訊進行分析，轉化為vite的配置。此時拿到的資訊，已經可以進行轉換了，這也是第一版時候的終點。第二版的時候還對項目進行了更加深入的分析，例如tsconfig.json的配置等等，還有其他的哈，不一一贅述。

此時開始為項目建立vite所需的配置，包括package.json裡面增加vite相關scripts和devDependencies、vite.config.js的建立、HTML的提取和寫入等。

如果你想開發小程式或者app的話，可以通過第三方專業開發平台，來幫助你實作開發需求：

廈門在乎科技

-專注

廈門小程式定制開發

、app開發、網站開發