preface

Document the process of upgrading an Ant Design Pro V2 project to V4 version D.

UMI3 upgrade

umi@2, first upgrade UMI to the latest V3 version

Refer to official documents: 1. Quick Upgrade to umi@3 2. Upgrade ANTD Pro project to umi@3

A. Delete dVA and UMi-plugin from package.json and change “umi”: “^3.0.0” and “@umijs/ preth-react “: “^1.2.2”

Among them, @umijs/preset- React already includes the umi-plugin

{" dependencies ": {-" dva ":" ^ server - 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 - the plugin - antd - theme" : "^" 1.0.1, - "umi - plugin - pro - block" : "^ 1.3.2," + "umi" : "^ 3.0.0", + "@ umijs/preset - react" : "^ 1.2.2"}}Copy the code

Run NPM install to reinstall

Found in practice:

Need to update antd@3 to the latest version: NPM I [email protected]

Re-install NPM I redux react-redux

B. Modify the config/config.js configuration file

We originally exported an object directly:

export default {

}
Copy the code

Now change to:

import { defineConfig } from 'umi';

export default defineConfig({

})
Copy the code

Remove obsolete attributes: plugins and disableRedirectHoist

Delete the devtool configuration and use the default configuration

Roughly change to the following format:

import { defineConfig, utils } from 'umi'; const { winPath } = utils; Export default defineConfig({// Use package.json to automatically mount UMI plugins without mounting them again // plugins: [], ANTd: {}, dVA: {HMR: true, }, locale: { default: 'zh-CN', baseNavigator: true, }, dynamicImport: {/ / / / no level, webpackChunkName configuration loadingComponent: '/ components/PageLoading/index' loading: '@ / components/PageLoading/index,}, / / temporarily closed pwa: false, lessLoader: {javascriptEnabled: true}, cssLoader: {// modules can accept getLocalIdent modules: {getLocalIdent: (context, localIdentName, localName) => { 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 => a.replace(/([A-Z])/g, '-$1')) .map(a => a.toLowerCase()); return `antd-pro${arr.join('-')}-${localName}`.replace(/--/g, '-'); } return localName; }}}})Copy the code

C. The module import mode is changed

// Change the import mode - 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'; -import {router} from 'umi'; + import { history } from 'umi'; - router.push() + history.push()Copy the code

D. Modify route configurations

In UMi2, the permission route is configured with the Routes attribute. In UMi3, this is changed to the wrappers property.

Modify the config/router. Config. Js

export default [ // app { path: '/', component: '../layouts/BasicLayout', wrappers: ['../pages/Authorized'], // Routes becomes wrappers Routes: [],},];Copy the code

E. Restart the project

NPM run start Theoretically, the project should be able to be started by UMi3.

If the error persists, modify the code according to the reason for the error.

Ant Design Pro built-in component upgrades

The Layout component provided by the Ant Design Pro V2 scaffolding has been detached into a separate NPM package @ant-Design/Pro-Layout. At the same time, several commonly used components are officially encapsulated to facilitate rapid business development. See ProComponents’ official website for details.

Ant Design 4 upgrade

Please refer to official documentation: FROM V3 to V4 A. ANTd upgrade to 3.x latest version (we have upgraded ANTD in the process of upgrading UMi3), remove/modify related API according to console warning information

B. Upgrade project React 16.12.0 NPM I React @^16.12.0

Rerun the project to see if it works correctly

C. Use the CLI tool to quickly upgrade

Since ANTD4 refactors a large number of components, the @ant-Design/Compatible NPM package is officially available for compatibility with existing antD2 deprecated components (such as older versions of Forms)

import { Form, Mention } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
Copy the code

A CLI tool is available that automatically transforms the way code is introduced. Submit your native code changes before running the CLI.

# SRC is the front-end source directory NPX -p @ant-design/codemod-v4 antd4-codemod SRCCopy the code

For the parts that cannot be automatically modified, Codemod will prompt you on the command line, and you are advised to manually modify them as prompted. After the modification, you can run the preceding command repeatedly.

D. Upgrade antD

NPM I antd@^4.0.0 @ant-design/ ICONS @^4.0.0 @ant-design/compatible@^1.0.0Copy the code

After the installation is successful, restart the project and view the page effect.

Problems after upgrade

A. Style problem

In the updated historical code, the Form component references @ant-Design /compatible, and the class name has changed from ant-form to ant-legacy-form. If you change the style of this section in your project, you will need to change the class name manually.

Style problems can only rely on their own page to check…

B. the API

<TextArea autosize={{minRows: 5}} />Copy the code

This API change can only be fixed by manual coding and page errors…

C. Antd4 bugs

For example, the RangePicker property defaultPickerValue is invalid

Upgrade is risky, dig carefully!