前言
自己在去年用ant design pro 創(chuàng)建了個后臺服務(wù)的項目祷安，當(dāng)時創(chuàng)建的時候umi控制臺提示是否使用antd 4,當(dāng)時抱著嘗鮮的想法選擇了yes,結(jié)果項目跑起來之后，功能沒有問題，但是打開后臺后發(fā)現(xiàn)各種提醒你升級或者遷移的warning,類似這樣：
看著著實蛋疼，ant design pro 本質(zhì)上是螞蟻全家桶，結(jié)合了antd和umi的一整套后臺項目解決方案，如果要解決這些warning,需要對整個項目進行系統(tǒng)升級(umi 2內(nèi)部使用的還是antd 3版本的組件，哪怕你業(yè)務(wù)組件都改了手报，umi不升級警告還是存在的)。
升級實戰(zhàn)
antd design pro 升級
這個升級最簡單改化，根據(jù)官方文檔的提醒掩蛤，直接安裝最新依賴：
npm i @ant-design/pro-layout --save
然后需要替換BasicLayout文件，這個直接參考官網(wǎng)升級指南即可陈肛，這里不贅述揍鸟。
umi 3 升級
接下來的重點是umi 從2升級到3，官網(wǎng)講了大致的改動句旱，但是具體的升級細節(jié)涉及的不多阳藻，這里我將結(jié)合官網(wǎng)指南和個人的項目來進行講解：
首先umi3需要node 10.13以上，這個是前提,其次為了支持umi3的新別名@@需要修改tsconfig.json的配置,在path中增加如下內(nèi)容：
"paths": {
"@/*": ["./src/*"],
"@@/*": ["./src/.umi/*"]
}
接下來要修改項目的配置文件config/config.ts, 原先的配置文件:
const plugins: IPlugin[] = [
[
'umi-plugin-react',
{
antd: true,
dva: {
hmr: true,
},
locale: {
// default false
enable: true,
// default zh-CN
default: 'zh-CN',
// default true, when it is true, will use `navigator.language` overwrite default
baseNavigator: true,
},
dynamicImport: {
loadingComponent: './components/PageLoading/index',
webpackChunkName: true,
level: 3,
},
pwa: pwa
? {
workboxPluginMode: 'InjectManifest',
workboxOptions: {
importWorkboxFrom: 'local',
},
}
: false, // default close dll, because issue https://github.com/ant-design/ant-design-pro/issues/4665
// dll features https://webpack.js.org/plugins/dll-plugin/
// dll: {
// include: ['dva', 'dva/router', 'dva/saga', 'dva/fetch'],
// exclude: ['@babel/runtime', 'netlify-lambda'],
// },
},
],
[
'umi-plugin-pro-block',
{
moveMock: false,
moveService: false,
modifyRequest: true,
autoAddMenu: true,
},
],
];
export default {
plugins,
targets: {
ie: 11,
},
// 省略部分內(nèi)容...
}
umi2中的plugins被移除(即無需使用umi-plugin-react)谈撒，其中的配置項上提一層腥泥，修改后：
import { defineConfig, utils } from 'umi';
export default defineConfig({
hash: true,
antd: {},
dva: {
hmr: true,
},
locale: {
default: 'zh-CN',
antd: true,
// default true, when it is true, will use `navigator.language` overwrite default
baseNavigator: true,
},
dynamicImport: {
loading: '@/components/PageLoading/index',
},
targets: {
ie: 11,
},
// 省略部分內(nèi)容...
}
umi3中將原先plugins中的pwa配置去除，umi-plugin-pro-block啃匿、umi-plugin-ga蛔外、umi-plugin-antd-theme等插件都去除蛆楞，同時最外層的配置需要使用umi3中最新的defineConfig進行處理，老版本中使用slash2這個包來處理windows下的css路徑夹厌，新版本通過umi.utils.winPath來處理豹爹。這里還有幾個關(guān)鍵點要注意：
- 配置中的lessLoaderOptions要替換成lessLoader
- 配置中的cssLoaderOptions要替換為cssLoader
- 刪除了 routes、library尊流、dll帅戒、hardSource、pwa崖技、hd、fastClick钟哥、chunks迎献，不可繼續(xù)使用
- 內(nèi)置 dynamicImport、title腻贰、scripts吁恍、headScripts、metas 和 links 到 Umi 中播演，可繼續(xù)使用
關(guān)于配置文件的升級冀瓦，還可以參考官方的ant design pro 4的默認配置文件
package.json移除不需要的依賴：
{
"umi-plugin-antd-icon-config": "^1.0.2",
"umi-plugin-ga": "^1.1.3",
"umi-plugin-pro": "^1.0.3",
"umi-types": "^0.5.9",
"redux": "^4.0.1",
"umi-plugin-antd-icon-config": "^1.0.2",
"umi-plugin-antd-theme": "1.2.0",
"umi-plugin-pro-block": "^1.3.2",
"umi-plugin-react": "^1.14.10",
"dva": "^2.6.0-beta.16"
}
添加新的依賴：
{
"@umijs/plugin-blocks": "^2.0.5",
"@umijs/preset-ant-design-pro": "^1.0.1",
"@umijs/preset-react": "^1.3.0",
"@umijs/preset-ui": "^2.0.9"
}
dva、redux等庫已經(jīng)全部整合到了umi包中写烤，原先那些包中引用的方法直接從umi中導(dǎo)入即可翼闽，不再需要引用上述提到的那些包。具體涉及的方法包括connect洲炊，ConnectProps, getLocale, setLocale感局，formatMessage，Dispatch暂衡，Link询微，FormattedMessage，Reducer狂巢，Effect撑毛，AnyAction等等。
業(yè)務(wù)代碼調(diào)整
樣式調(diào)整
除了上述提到的點唧领，業(yè)務(wù)代碼上還有部分改動藻雌，首先如果要在css里引用別名或第三方庫，需要添加~前綴疹吃，例如：
# 別名
變 background: url(@/xx/xx.jpg)
為 background: url(~@/xx/xx.jpg)
# 第三方庫
變 @import url(foo/bar.css);
為 @import url(~foo/bar.css);
部分方法調(diào)整
原先的umi中的router相關(guān)方法全部替換為history:
import router from 'umi/router';
...
router.push(`/account/${key}`);
...
變?yōu)椋?/p>
import { connect, history } from 'umi';
...
history.push(`/account/${key}`);
如果你運行項目蹦疑，可能會有如下提醒：
這個是由于umi3中針對國際化的相關(guān)語法有了變化，根據(jù)提醒萨驶，如果還使用老的
formatMessage歉摧，在切換語言時可能頁面UI不會跟著變化，需要使用新的useIntl或injectIntl，這兩者都是umi3中的新方法叁温，前者針對react 的hooks語法再悼，后者針對class。以useIntl為例膝但，原來的寫法為：
import { formatMessage } from 'umi3';
...
return(<ProLayout
formatMessage={formatMessage}
>
...
</ProLayout>)
...
現(xiàn)在為：
import { useIntl } from 'umi3';
const intl = useIntl();
...
return(<ProLayout
formatMessage={intl.formatMessage}
>
...
</ProLayout>)
...
injectIntl的使用方法類似冲九，可以去查找對應(yīng)的api。
antd 4 升級
接下來的主要遷移工作在于antd 4跟束，該版本中的很多組件重寫或者使用了新的api,其中比較典型的就是最為常用的Form組件莺奸，icon組件也改變了引用的方式，能夠顯著減小打包體積冀宴。這里由于篇幅關(guān)系灭贷，不詳細展開。表單遷移的注意事項詳見官方文檔.antd 4的其他變化詳見遷移指南
參考文獻
ant design pro 4官方遷移文檔
ant design pro 中升級umi 3
umi 3 官方升級文檔
antd 4官方升級指南
