antd+react+webpack往往是以react技術(shù)棧為主的前端項目的標準組合，三者都有成熟的生態(tài)和穩(wěn)定的表現(xiàn)，但隨著前端圈的技術(shù)不斷革新，號稱下一代構(gòu)建平臺vite2的發(fā)布，webpack似乎不那么香了，為什么這么說呢，因為vite太快了。經(jīng)過一段時間的嘗試，決定在項目中把webpack替換成vite試試，遂寫成本文分享給大家。
Vite是什么
作為本文的主角，首先簡單介紹一下vite這個構(gòu)建工具，該工具是尤雨溪推出的【下一代前端開發(fā)和構(gòu)建工具】，vite其實也不是一個新的工具，早在一年多以前，就已經(jīng)推出了很多版本，直到2.x版本的推出，在前端圈引起了足夠大的震動，標志著vite的成熟和強大，這里并不打算詳細介紹vite，大家可以參考官網(wǎng)https://cn.vitejs.dev/ 了解。
遷移過程
了解了vite這款工具之后，我們就可以著手準備做遷移工作了；
1.安裝vite依賴
|
1
|
npm i vite antd-vite-import-plugin @vitejs/plugin-react-refresh vite-plugin-html -D |
2.更新項目原有依賴項
這里我們項目使用的是dva+antd3.x作為基礎(chǔ)的開發(fā)框架，這里我將系統(tǒng)的主要依賴項都升級到了最新的版本，比如dva我用的2.6.0-beta.22版本，其他附帶的react、react-dom、react-router-dom及@babel/plugin-transform-runtime等相關(guān)依賴項都更新了（antd還是3.x版本，暫未更新到4.x的大版本），這一塊取決于自己的實際需求；
3.項目根目錄添加vite.config.js配置文件
和webpack的配置文件比起來，vite的簡單了許多，而且很多功能都是內(nèi)置的，比如對靜態(tài)資源的處理，功能開啟也比較簡單，具體如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
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', // 模板頁 } }, }), ], server: { open: true, port: 10010, }}); |
這里我們使用了vite-plugin-html插件作為html-webpack-plugin的替代方案，其中需要注意injectData和injectOptions選項，injectData可以方便的往我們的模板頁中插入自定義數(shù)據(jù)，injectOptions可以指定模板頁，還有其他配置項可以參考https://www.npmjs.com/package/vite-plugin-html 。相應(yīng)的需要改造index.html頁面：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html><head> <meta charset="utf-8"> <title><%- title %></title> ......</head><body> <div id="app"></div> <script> var global = globalThis || window; // 防止啟動報錯 </script> <%- injectScript %> <script type="module" src="/src/index.jsx"></script></body></html> |
和webpack有差異的是，這里我們需要手動指定一下入口文件，script的標簽type為module。
4.修改文件后綴
這里的文件是以js作為后綴的react組件，在webpack構(gòu)建平臺下，js(x)、ts(x)都是沒啥問題的，但如果使用vite的話，那么最好是ts 、 jsx 、 tsx 的后綴文件，關(guān)于這個問題，可以看下這個issue:https://github.com/vitejs/vite/issues/1552 ，最后作者發(fā)出批量改個后綴有這么難的吐槽，算了，還是改吧，如果覺得手動改麻煩，寫個腳本也不是啥難事。
5.添加啟動腳本
|
1
2
3
4
5
|
"scripts": { "dev": "vite", "build": "vite build", ......} |
到這里應(yīng)該就差不多了吧，但是情況卻不是那么順利，項目居然跑不起來，好吧，沒有那么一帆風(fēng)順的事情，接下來我們來看下遇到的問題吧。
遇到的問題
1.decorators not support
在業(yè)務(wù)代碼中，我們使用了dva提供的connect來綁定狀態(tài)，形如：
|
1
2
3
4
|
@connect(state => state.foo)class Foo extends React.PureComponent { ....} |
但是decorators語法居然不被vite支持，關(guān)于這個問題，也有一個issus:https://github.com/vitejs/vite/issues/2349 ,目前沒有一個好的解決辦法，只好去掉decorators，改用常規(guī)的函數(shù)綁定了。
2.antd Unknown theme type: undefined, name: undefined
我們項目目前還是使用的antd的3.x版本，在啟動時就出現(xiàn)了這個錯誤，其實主要是antd組件初始化的時候，加載了antd/es/icon/index.js文件:
|
1
2
3
4
5
6
|
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)出的對象是{ default: {...} }，要正確訪問的形式是allIcons.default，而不是allIcons，因此導(dǎo)致獲取不到icon的正確導(dǎo)出對象，關(guān)于這個問題，大家可以看下這個issue:https://github.com/ant-design/ant-design/issues/19002 ,這里要說明的一點是antd4.x版本不會出現(xiàn)，但是對于我們的項目來講，目前還不會升級到4這個大版本，那么怎么解決呢，其實只要引用antd/lib下的組件，就沒有這個問題了，我們可以看下antd/lib/icon/index.js：
|
1
2
3
4
5
|
......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)出的問題，那么修改一下babel-plugin-import的配置不就好了么，好吧，沒有那么容易的，vite對babel-plugin-import支持不那么好，首先還是去vite的issues里面找找看，有一個類似的提問：https://github.com/vitejs/vite/issues/1389 ，看了下，并沒有解決我的問題，里面提到的幾個插件倒是給我了思路，那就自己寫個vite插件去實現(xiàn)我們的需求唄。插件的思路很簡單，就是將antd組件的引入方式進行統(tǒng)一的修改：
|
1
2
|
---修改前---import { Button } from 'antd'; |
|
1
2
3
|
---修改后---import Button from 'antd/lib/button';import 'antd/lib/button/style/index.css'; |
這里需要說明的是css樣式的引入，如果引入style/index或者style/css，會出現(xiàn)require is not defined的問題，因為這兩個js文件中使用了require，但是vite在預(yù)編譯時不是node環(huán)境，當(dāng)然就報錯了。
關(guān)于這個插件的使用，可以參考https://www.npmjs.com/package/antd-vite-import-plugin 。
3.'default' is not exported
有時候三方依賴項加載會出錯，例如'default' is not exported等，這里可以參考https://github.com/vitejs/vite/issues/2679
在實際開發(fā)過程中，還是難免遇到一些奇怪的問題，這都是嘗鮮的代價。
速度之爭
vite的一個優(yōu)勢就是快，那么和webpack相比，到底有多大的差距呢，這里我們用webpack和vite分別啟動同一個本地項目：
| 構(gòu)建工具 | 啟動時間(ms) |
|---|---|
| vite | 702ms |
| webpack | 7093ms |
這里只是一個粗略的對比，從數(shù)據(jù)上看有十倍之差，單從速度上講，vite是很快了，根據(jù)官網(wǎng)的解釋，Vite 將會使用 esbuild 預(yù)構(gòu)建依賴。Esbuild 使用 Go 編寫，并且比以 JavaScript 編寫的打包器預(yù)構(gòu)建依賴快 10-100 倍。
最后
經(jīng)歷過一番折騰后，覺得vite2的成熟度有所欠缺，在一些小項目中可以試試。對我而言還是決定先用webpack吧，畢竟webpack經(jīng)過這么多年的發(fā)展，坑很少，而目前vite對于react來說還是不那么完美。
到此這篇關(guān)于詳解antd+react項目遷移vite的解決方案的文章就介紹到這了,更多相關(guān)antd react遷移vite內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://www.cnblogs.com/fulu/p/14676711.html
