因为项目要用到antd4.0最新的紧凑模式,所以决定使用官网推荐的使用方式,将umi升到3.0,设置属性compact为true即可。下面是项目主要的修改及配置。
一.package.json
{
"dependencies": {
- "umi": "^2"
+ "umi": "^3"
}
}
{
"devDependencies": {
- "umi-plugin-react": "^1"
+ "@umijs/preset-react": "^1"
}
}
二.config.js
umi配置方式修改了,所以config.js文件中也要相应修改
```
export default {
- plugins: [
- ['umi-plugin-react', {
- dva: {},
- antd: {},
- ...
- }]
- ],
+ dva: {},
+ antd: {},
+ ...
}
```
三.代码层
删除了 routes、library、dll、hardSource、pwa、hd、fastClick、chunks,不可继续使用
内置 dynamicImport、title、scripts、headScripts、metas 和 links 到 Umi 中,可继续使用
- import Link from 'umi/link';
+ import { Link } from 'umi';
- import router from 'umi/router';
+ import { history } from 'umi';
- router.push('/foo');
+ history.push('/foo');
# 别名
- background: url(@/utils/utils.less);
+ background: url(~@/utils/utils.less);
# 三方库
- @import url(foo/bar.css);
+ @import url(~foo/bar.css);
还有一些注意的问题
1.一共升级了3个项目,前两个项目是好的,最后一个紧凑一直出不来,之前试了一直以为是umi没有配置好,但是试了好几次都不行。最后反复调试,才发现我某一个文件中曾经导入了这个css文件。
import 'antd/dist/antd.css';
这就导致css文件把我的紧凑模型的less给覆盖掉了,所以使用antd的小伙伴需要注意一下。
2.window.g_app._store获取不到dispatch了。得使用getDvaApp。
import { getDvaApp } from 'umi';
getDvaApp()._store.dispatch({
type: 'login/jumpToLogin',
});
还有其他升级的需要注意的也会陆续更新。