react中umi升级2.0到3.0（antd项目）

因为项目要用到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',
});

还有其他升级的需要注意的也会陆续更新。