This article has not been translated yet. Want to help us out? Click the Edit this doc on GitHub at the end of the page.

Upgrade Ant Design Pro to Umi 3

迁移到 Umi 3 分三步，不到 10 分钟即可完成迁移：

依赖处理
配置层迁移
代码层修改

依赖处理

项目的 package.json 需要升级 umi，并替换掉对应的 umi 插件。

{
  "dependencies": {
-   "dva": "^2.6.0-beta.16",
  },
  "devDependencies": {
-   "umi": "^2.13.0",
-   "umi-types": "^0.5.9"
-   "umi-plugin-react": "^1.14.10",
-   "umi-plugin-ga": "^1.1.3",
-   "umi-plugin-pro": "^1.0.2",
-   "umi-plugin-antd-icon-config": "^1.0.2",
-   "umi-plugin-antd-theme": "^1.0.1",
-   "umi-plugin-pro-block": "^1.3.2",
+   "umi": "^3.0.0",
+   "@umijs/preset-react": "^1.2.2"
  }
}

执行下 npm install 重装依赖。

配置层迁移

根据 Umi 3 配置，有修改的配置项如下 config/config.ts ：

import { defineConfig, utils } from 'umi';

const { winPath } = utils;

export default defineConfig({
  // 通过 package.json 自动挂载 umi 插件，不需再次挂载
  // plugins: [],
  antd: {},
  dva: {
    hmr: true,
  },
  locale: {
    default: 'zh-CN',
    baseNavigator: true,
  },
  dynamicImport: {
    // 无需 level, webpackChunkName 配置
    // loadingComponent: './components/PageLoading/index'
    loading: '@/components/PageLoading/index',
  },
  // 暂时关闭
  pwa: false,
  lessLoader: { javascriptEnabled: true },
  cssLoader: {
    // 这里的 modules 可以接受 getLocalIdent
    modules: {
      getLocalIdent:(
        context: {
          resourcePath: string;
        },
        _: string,
        localName: string,
      ) => {
        if (
          context.resourcePath.includes('node_modules') ||
          context.resourcePath.includes('ant.design.pro.less') ||
          context.resourcePath.includes('global.less')
        ) {
          return localName;
        }
        const match = context.resourcePath.match(/src(.*)/);
        if (match && match[1]) {
          const antdProPath = match[1].replace('.less', '');
          const arr = winPath(antdProPath)
            .split('/')
            .map((a: string) => a.replace(/([A-Z])/g, '-$1'))
            .map((a: string) => a.toLowerCase());
          return `antd-pro${arr.join('-')}-${localName}`.replace(/--/g, '-');
        }
        return localName;
      },
    }
  }
})

代码层修改

Umi 3 增加 import from umi，常用的模块、工具可直接从 umi 中导入：

- import Link from 'umi/link';
- import { connect } from 'dva';
- import { getLocale, setLocale, formatMessage } from 'umi-plugin-react/locale';
+ import {
+   Link,
+   connect,
+   getLocale,
+   setLocale,
+   formatMessage,
+ } from 'umi';

**注意：**不建议直接使用 formatMessage，推荐大家使用 useIntl 或者 injectIntl，可以实现同样的功能。

路由跳转使用 history：

- import { router } from 'umi';
+ import { history } from 'umi';
- router.push()
+ history.push()

第三步完成后，执行下 npm run start，访问 http://localhost:8000，能访问则表示迁移完成。

更多迁移细节见 PR。

UmiJS

Upgrade Ant Design Pro to Umi 3

依赖处理

配置层迁移

代码层修改