实战:项目umi2.x升级到umi3.x

2,466 阅读1分钟

package.json

1.修改 umi 的版本为 ^3.0.0 或以上,

{
  "devDependencies": {
-   "umi": "^2"
+   "umi": "^3"
  }
}

2.升级 umi-plugin-react 为 @umijs/preset-react

{
  "devDependencies": {
-   "umi-plugin-react": "^1"
+   "@umijs/preset-react": "^1"
  }
}

3.umirc.js还需要修改配置:

	+ dva:{
		// immer: true,
		hmr: true,
		// skipModelValidate: true
	},
	+ antd:{},
	// 按需加载
	+ dynamicImport: {},
	+ title: '传化油卡运营管理后台',
	+ history: 'hash',
    - plugins: [
    -     // ref: https://umijs.org/plugin/umi-plugin-react.html
    -     [
    -         'umi-plugin-react',
    -         {
    -             antd: true,
    -             dva: true,
    -             dynamicImport: true,
    -             title: '传化油卡运营管理后台',
    -             routes: {
    -                 exclude: [
    -                     /map\.(j|t)sx?$/,
    -                     /model\.(j|t)sx?$/,
    -                     /service\.(j|t)sx?$/,
    -                     /models\//,
    -                     /components\//,
    -                     /services\//,
    -                     /readme\.md/,
    -                 ],
    -             },
    -         },
    -     ],
    - 
    - ],
    - treeShaking: true,

代码层

// Link引用修改
- import Link from 'umi/link';
+ import { Link } from 'umi';

// router引用修改
- import router from 'umi/router';
+ import { history } from 'umi';
- router.push('/foo');
+ history.push('/foo');

// withRouter引用修改 
- import withRouter from 'umi/withRouter';
+ import { withRouter } from 'umi';

需要进行全局修改。

碰到的问题

  1. [app.model] namespace should be unique 原因是:页面model里面的namespace命名不唯一,有重名。
  2. 修改namespace要特别主要有没有其他页面用到该modal,针对公共model
  3. 配置文件中加入loading,不然在页面加载之前会显示英文loading
dynamicImport: {
	loading: '@/Loading',
},

在src目录下新建Loading.js, 内容如下:

import React from 'react';
export default () => {
    return <></>;
};