前端黑科技:讓W(xué)ebpack項(xiàng)目一鍵支持Vite

Webpack -> Vite

Vite 2.0發(fā)布一段時(shí)間了很多朋友由于種種原因無法嘗試在項(xiàng)目中使用

最近我在思否看有人發(fā)的文章，一鍵讓你的webpack支持vite

安裝wp2vite

npm?install?-g?wp2vite

安裝完成后，進(jìn)入你的項(xiàng)目根目錄

cd?yourProjectRootPath

進(jìn)入根目錄后，執(zhí)行命令wp2vite --config=后面跟上你的webpack配置文件，例如：

wp2vite?--config=./webpack.config.js?//?傳遞配置文件

執(zhí)行以后：

安裝新的vite所需依賴：

npm?i?
npm?run?dev

你可能還是會跑不起來，這里注意幾個(gè)點(diǎn)：

• 項(xiàng)目依賴必須是支持ESM的，建議安裝package@next版本的
• 熱更新不需要之前的那些插件了,vite.config.js里面已經(jīng)幫忙聲明好了，可以刪除
• 一些未知問題

原理：1.讀取package.json里面的依賴信息 2.讀取webpack配置文件 3.轉(zhuǎn)換webpack的配置為vite配置 4.輸出index.html和vite.config等文件 5.增加package.json里面的vite依賴信息

源碼地址：https://github.com/tnfe/wp2vite

如果你想直接使用，也可以用我的腳手架，直接生成項(xiàng)目:

npm?i?ykj-cli?-g?
ykj?init?App（選擇通用項(xiàng)目模板）
cd?/App
yarn?
yarn?dev

創(chuàng)作不易，加個(gè)點(diǎn)贊、在看?支持一下哦！