Upgrade to [email protected]

chenshuai2144afc163
Last updated on 2020-07-29 10:47:14

Upgrading [email protected] has minor changes, mainly due to the configuration of the plugin and changes in the import content. It should be noted that [email protected] will automatically import the plug-ins starting with umi-plugin or @umijs.

Configuration

tsconfig

Added in tsconfig.json

"paths": {
  "@/*": ["./src/*"],
  "@@/*": ["./src/.umi/*"]
}

This is to support the new alias @@ of [email protected]

config.ts

  • lessLoaderOptions changed to lessLoader
  • Removed plugins field, umi has been modified to automatically scan package.json, no need
  • cssLoaderOptions changed to cssLoader
  • IConfig is changed to defineConfig, directly imported from umi
  • The dynamicImport of umi-plugin-react has been upgraded to the first level.

package.json

Remove unwanted dependencies:

{
  "umi-plugin-antd-icon-config": "^1.0.2",
  "umi-plugin-ga": "^1.1.3",
  "umi-plugin-pro": "^1.0.3",
  "umi-types": "^0.5.9",
  "redux": "^4.0.1",
  "umi-plugin-antd-icon-config": "^1.0.2",
  "umi-plugin-antd-theme": "1.2.0",
  "umi-plugin-pro-block": "^1.3.2",
  "umi-plugin-react": "^1.14.10",
  "dva": "^2.6.0-beta.16"
}

Add new dependencies:

{
  "@umijs/plugin-blocks": "^2.0.5",
  "@umijs/preset-ant-design-pro": "^1.0.1",
  "@umijs/preset-react": "^1.3.0",
  "@umijs/preset-ui": "^2.0.9"
}

For more configuration level changes, you can see Move to [email protected].

@ umijs/preset-ant-design-pro includes umi-plugin-antd-icon-config, just install @ umijs/preset-ant-design-pro.

Code changes

connect,ConnectProps, getLocale,setLocale, formatMessage,Dispatch, Link,FormattedMessage, Reducer,Effect, AnyAction all modified to import from umi.

The original umi-plugin-react/locale is deprecated. All exported from umi-plugin-react/locale can be imported from umi. The original router is modified to history, and the api remains unchanged.

lint and typescript type issues

Because umi @ 3 uses the runtime type, lint and typescript may report errors when the dependency installation is completed. This is because the definition file is not generated. We can execute npm run lint or yarn run umi g tmp to generate temporary files. If you find it more troublesome, you can do the following configuration in the scripts of package.json.

"postinstall": "umi g tmp"

It will be automatically generated when umi dev and umi build are executed, and will not affect normal development.

For details, please see this diff.