升级 antd pro 项目到 umi@3

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

  1. 依赖处理
  2. 配置层迁移
  3. 代码层修改

依赖处理

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

  1. {
  2.   "dependencies": {
  3. -   "dva": "^2.6.0-beta.16",
  4.   },
  5.   "devDependencies": {
  6. -   "umi": "^2.13.0",
  7. -   "umi-types": "^0.5.9"
  8. -   "umi-plugin-react": "^1.14.10",
  9. -   "umi-plugin-ga": "^1.1.3",
  10. -   "umi-plugin-pro": "^1.0.2",
  11. -   "umi-plugin-antd-icon-config": "^1.0.2",
  12. -   "umi-plugin-antd-theme": "^1.0.1",
  13. -   "umi-plugin-pro-block": "^1.3.2",
  14. +   "umi": "^3.0.0",
  15. +   "@umijs/preset-react": "^1.2.2"
  16.   }
  17. }

执行下 npm install 重装依赖。

配置层迁移

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

  1. import { defineConfig, utils } from 'umi';
  3. const { winPath } = utils;
  5. export default defineConfig({
  6.   // 通过 package.json 自动挂载 umi 插件，不需再次挂载
  7.   // plugins: [],
  8.   antd: {},
  9.   dva: {
  10.     hmr: true,
  11.   },
  12.   locale: {
  13.     default: 'zh-CN',
  14.     baseNavigator: true,
  15.   },
  16.   dynamicImport: {
  17.     // 无需 level, webpackChunkName 配置
  18.     // loadingComponent: './components/PageLoading/index'
  19.     loading: '@/components/PageLoading/index',
  20.   },
  21.   // 暂时关闭
  22.   pwa: false,
  23.   lessLoader: { javascriptEnabled: true },
  24.   cssLoader: {
  25.     // 这里的 modules 可以接受 getLocalIdent
  26.     modules: {
  27.       getLocalIdent:(
  28.         context: {
  29.           resourcePath: string;
  30.         },
  31.         _: string,
  32.         localName: string,
  33.       ) => {
  34.         if (
  35.           context.resourcePath.includes('node_modules') ||
  36.           context.resourcePath.includes('ant.design.pro.less') ||
  37.           context.resourcePath.includes('global.less')
  38.         ) {
  39.           return localName;
  40.         }
  41.         const match = context.resourcePath.match(/src(.*)/);
  42.         if (match && match[1]) {
  43.           const antdProPath = match[1].replace('.less', '');
  44.           const arr = winPath(antdProPath)
  45.             .split('/')
  46.             .map((a: string) => a.replace(/([A-Z])/g, '-$1'))
  47.             .map((a: string) => a.toLowerCase());
  48.           return `antd-pro${arr.join('-')}-${localName}`.replace(/--/g, '-');
  49.         }
  50.         return localName;
  51.       },
  52.     }
  53.   }
  54. })

代码层修改

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

  1. - import Link from 'umi/link';
  2. - import { connect } from 'dva';
  3. - import { getLocale, setLocale, formatMessage } from 'umi-plugin-react/locale';
  4. + import {
  5. +   Link,
  6. +   connect,
  7. +   getLocale,
  8. +   setLocale,
  9. +   formatMessage,
  10. + } from 'umi';

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

路由跳转使用 history：

  1. - import { router } from 'umi';
  2. + import { history } from 'umi';
  4. - router.push()
  5. + history.push()

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

指南 - 图1

更多迁移细节见 PR。