詳解antd+react項(xiàng)目遷移vite的解決方案
antd+react+webpack往往是以react技術(shù)棧為主的前端項(xiàng)目的標(biāo)準(zhǔn)組合，三者都有成熟的生態(tài)和穩(wěn)定的表現(xiàn)，但隨著前端圈的技術(shù)不斷革新，號(hào)稱下一代構(gòu)建平臺(tái)vite2的發(fā)布，webpack似乎不那么香了，為什么這么說(shuō)呢，因?yàn)関ite太快了。經(jīng)過(guò)一段時(shí)間的嘗試，決定在項(xiàng)目中把webpack替換成vite試試，遂寫(xiě)成本文分享給大家。
Vite是什么
作為本文的主角，首先簡(jiǎn)單介紹一下vite這個(gè)構(gòu)建工具，該工具是尤雨溪推出的【下一代前端開(kāi)發(fā)和構(gòu)建工具】，vite其實(shí)也不是一個(gè)新的工具，早在一年多以前，就已經(jīng)推出了很多版本，直到2.x版本的推出，在前端圈引起了足夠大的震動(dòng)，標(biāo)志著vite的成熟和強(qiáng)大，這里并不打算詳細(xì)介紹vite，大家可以參考官網(wǎng)https://cn.vitejs.dev/ 了解。
遷移過(guò)程
了解了vite這款工具之后，我們就可以著手準(zhǔn)備做遷移工作了；
1.安裝vite依賴
npm i vite antd-vite-import-plugin @vitejs/plugin-react-refresh vite-plugin-html -D
2.更新項(xiàng)目原有依賴項(xiàng)
這里我們項(xiàng)目使用的是dva+antd3.x作為基礎(chǔ)的開(kāi)發(fā)框架，這里我將系統(tǒng)的主要依賴項(xiàng)都升級(jí)到了最新的版本，比如dva我用的2.6.0-beta.22版本，其他附帶的react、react-dom、react-router-dom及@babel/plugin-transform-runtime等相關(guān)依賴項(xiàng)都更新了（antd還是3.x版本，暫未更新到4.x的大版本），這一塊取決于自己的實(shí)際需求；
3.項(xiàng)目根目錄添加vite.config.js配置文件
和webpack的配置文件比起來(lái)，vite的簡(jiǎn)單了許多，而且很多功能都是內(nèi)置的，比如對(duì)靜態(tài)資源的處理，功能開(kāi)啟也比較簡(jiǎn)單，具體如下：
import { defineConfig } from 'vite';
import vitePluginHtml from 'vite-plugin-html';
import reactRefresh from '@vitejs/plugin-react-refresh';
export default defineConfig({
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
}
},
publicDir: './src/configs',
plugins: [
reactRefresh(),
antdViteImportPlugin(),
vitePluginHtml({
minify: true,
inject: {
injectData: {
title: 'vite-react-example',
injectScript: '<script src="/configs.js"></script>', // publicDir作為根目錄
},
injectOptions: {
filename: './index.html', // 模板頁(yè)
}
},
}),
],
server: {
open: true,
port: 10010,
}
});
這里我們使用了vite-plugin-html插件作為html-webpack-plugin的替代方案，其中需要注意injectData和injectOptions選項(xiàng)，injectData可以方便的往我們的模板頁(yè)中插入自定義數(shù)據(jù)，injectOptions可以指定模板頁(yè)，還有其他配置項(xiàng)可以參考https://www.npmjs.com/package/vite-plugin-html 。相應(yīng)的需要改造index.html頁(yè)面：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title><%- title %></title>
......
</head>
<body>
<div id="app"></div>
<script>
var global = globalThis || window; // 防止啟動(dòng)報(bào)錯(cuò)
</script>
<%- injectScript %>
<script type="module" src="/src/index.jsx"></script>
</body>
</html>
和webpack有差異的是，這里我們需要手動(dòng)指定一下入口文件，script的標(biāo)簽type為module。
4.修改文件后綴
這里的文件是以js作為后綴的react組件，在webpack構(gòu)建平臺(tái)下，js(x)、ts(x)都是沒(méi)啥問(wèn)題的，但如果使用vite的話，那么最好是ts 、 jsx 、 tsx 的后綴文件，關(guān)于這個(gè)問(wèn)題，可以看下這個(gè)issue:https://github.com/vitejs/vite/issues/1552 ，最后作者發(fā)出批量改個(gè)后綴有這么難的吐槽，算了，還是改吧，如果覺(jué)得手動(dòng)改麻煩，寫(xiě)個(gè)腳本也不是啥難事。
5.添加啟動(dòng)腳本
"scripts": {
"dev": "vite",
"build": "vite build",
......
}
到這里應(yīng)該就差不多了吧，但是情況卻不是那么順利，項(xiàng)目居然跑不起來(lái)，好吧，沒(méi)有那么一帆風(fēng)順的事情，接下來(lái)我們來(lái)看下遇到的問(wèn)題吧。
遇到的問(wèn)題
1.decorators not support
在業(yè)務(wù)代碼中，我們使用了dva提供的connect來(lái)綁定狀態(tài)，形如：
@connect(state => state.foo)
class Foo extends React.PureComponent {
....
}
但是decorators語(yǔ)法居然不被vite支持，關(guān)于這個(gè)問(wèn)題，也有一個(gè)issus:https://github.com/vitejs/vite/issues/2349 ,目前沒(méi)有一個(gè)好的解決辦法，只好去掉decorators，改用常規(guī)的函數(shù)綁定了。
2.antd Unknown theme type: undefined, name: undefined
我們項(xiàng)目目前還是使用的antd的3.x版本，在啟動(dòng)時(shí)就出現(xiàn)了這個(gè)錯(cuò)誤，其實(shí)主要是antd組件初始化的時(shí)候，加載了antd/es/icon/index.js文件:
import * as allIcons from '@ant-design/icons/lib/dist';
......
ReactIcon.add.apply(ReactIcon, _toConsumableArray(Object.keys(allIcons).map(function (key) {
return allIcons[key];
})));
......
'@ant-design/icons/lib/dist'導(dǎo)出的對(duì)象是{ default: {...} }，要正確訪問(wèn)的形式是allIcons.default，而不是allIcons，因此導(dǎo)致獲取不到icon的正確導(dǎo)出對(duì)象，關(guān)于這個(gè)問(wèn)題，大家可以看下這個(gè)issue:https://github.com/ant-design/ant-design/issues/19002 ,這里要說(shuō)明的一點(diǎn)是antd4.x版本不會(huì)出現(xiàn)，但是對(duì)于我們的項(xiàng)目來(lái)講，目前還不會(huì)升級(jí)到4這個(gè)大版本，那么怎么解決呢，其實(shí)只要引用antd/lib下的組件，就沒(méi)有這個(gè)問(wèn)題了，我們可以看下antd/lib/icon/index.js：
......
var allIcons = _interopRequireWildcard(require("@ant-design/icons/lib/dist"));
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
......
這里_interopRequireWildcard方法幫我們處理了導(dǎo)出的問(wèn)題，那么修改一下babel-plugin-import的配置不就好了么，好吧，沒(méi)有那么容易的，vite對(duì)babel-plugin-import支持不那么好，首先還是去vite的issues里面找找看，有一個(gè)類似的提問(wèn)：https://github.com/vitejs/vite/issues/1389 ，看了下，并沒(méi)有解決我的問(wèn)題，里面提到的幾個(gè)插件倒是給我了思路，那就自己寫(xiě)個(gè)vite插件去實(shí)現(xiàn)我們的需求唄。插件的思路很簡(jiǎn)單，就是將antd組件的引入方式進(jìn)行統(tǒng)一的修改：
---修改前---
import { Button } from 'antd';
---修改后--- import Button from 'antd/lib/button'; import 'antd/lib/button/style/index.css';
這里需要說(shuō)明的是css樣式的引入，如果引入style/index或者style/css，會(huì)出現(xiàn)require is not defined的問(wèn)題，因?yàn)檫@兩個(gè)js文件中使用了require，但是vite在預(yù)編譯時(shí)不是node環(huán)境，當(dāng)然就報(bào)錯(cuò)了。
關(guān)于這個(gè)插件的使用，可以參考https://www.npmjs.com/package/antd-vite-import-plugin 。
3.'default' is not exported
有時(shí)候三方依賴項(xiàng)加載會(huì)出錯(cuò)，例如'default' is not exported等，這里可以參考https://github.com/vitejs/vite/issues/2679
在實(shí)際開(kāi)發(fā)過(guò)程中，還是難免遇到一些奇怪的問(wèn)題，這都是嘗鮮的代價(jià)。
速度之爭(zhēng)
vite的一個(gè)優(yōu)勢(shì)就是快，那么和webpack相比，到底有多大的差距呢，這里我們用webpack和vite分別啟動(dòng)同一個(gè)本地項(xiàng)目：
| 構(gòu)建工具 | 啟動(dòng)時(shí)間(ms) |
|---|---|
| vite | 702ms |
| webpack | 7093ms |
這里只是一個(gè)粗略的對(duì)比，從數(shù)據(jù)上看有十倍之差，單從速度上講，vite是很快了，根據(jù)官網(wǎng)的解釋，Vite 將會(huì)使用 esbuild 預(yù)構(gòu)建依賴。Esbuild 使用 Go 編寫(xiě)，并且比以 JavaScript 編寫(xiě)的打包器預(yù)構(gòu)建依賴快 10-100 倍。
最后
經(jīng)歷過(guò)一番折騰后，覺(jué)得vite2的成熟度有所欠缺，在一些小項(xiàng)目中可以試試。對(duì)我而言還是決定先用webpack吧，畢竟webpack經(jīng)過(guò)這么多年的發(fā)展，坑很少，而目前vite對(duì)于react來(lái)說(shuō)還是不那么完美。
到此這篇關(guān)于詳解antd+react項(xiàng)目遷移vite的解決方案的文章就介紹到這了,更多相關(guān)antd react遷移vite內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解讀useState第二個(gè)參數(shù)的"第二個(gè)參數(shù)"
這篇文章主要介紹了useState第二個(gè)參數(shù)的"第二個(gè)參數(shù)",具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了React中setState的異步操作案例詳解，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一點(diǎn)點(diǎn)參考價(jià)值，感興趣的小伙伴可以參考一下2022-08-08
Node-sass是一個(gè)庫(kù),它將Node.js綁定到LibSass（流行樣式表預(yù)處理器Sass的C版本）,它允許用戶以令人難以置信的速度將.scss文件本地編譯為css,并通過(guò)連接中間件自動(dòng)編譯,下面這篇文章主要給大家介紹了關(guān)于React安裝node-sass失敗解決的相關(guān)資料,需要的朋友可以參考下2022-11-11
Mobx是一個(gè)前端“狀態(tài)管理框架”，狀態(tài)管理就是將分布在各個(gè)組件、各個(gè)模塊中的狀態(tài)的變化，按照一定的規(guī)則，進(jìn)行統(tǒng)一的管理，這篇文章主要介紹了React中如何使用Mobx,需要的朋友可以參考下2023-02-02
React?Hooks之usePolymerAction抽象代碼結(jié)構(gòu)設(shè)計(jì)理念
這篇文章主要為大家介紹了React?Hooks之usePolymerAction抽象代碼結(jié)構(gòu)設(shè)計(jì)理念，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
本文帶領(lǐng)大家一起探討前端框架react，涉及到前端框架react相關(guān)知識(shí)，對(duì)前端框架react相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12
這篇文章主要介紹了詳解React 服務(wù)端渲染方案完美的解決方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
解決React報(bào)錯(cuò)Invalid hook call
這篇文章主要為大家介紹了React報(bào)錯(cuò)Invalid hook call解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了詳解react如何在組件中獲取路由參數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了在react中使用vue的狀態(tài)管理的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05