Ant-design-pro: 🔥🔥🔥🔥 如何快速升级到 umi@3

Created on 23 Mar 2020 · 16Comments · Source: ant-design/ant-design-pro

升级 umi@3 改动较小，主要是插件的配置，与 import 内容的变化。需要注意的是 umi@3 会自动导入已 umi-plugin 或@umijs 开头的插件。

配置

tsconfig

tsconfig 中增加

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

此举是为了支持 umi@3 的新别名 @@。

config.ts

lessLoaderOptions 修改为 lessLoader
移除 plugins 字段，umi 已经修改为自动扫描 package.json，无需
cssLoaderOptions 修改为 cssLoader
IConfig 修改为 defineConfig，从 umi 中直接引入
umi-plugin-react 的 dynamicImport，配置提升到第一级。

package.json

移除不需要的依赖

{
  "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"
}

增加新的依赖

{
  "@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"
}

更多配置层面的改动可以看迁移到 umi@3。

@umijs/preset-ant-design-pro 里面包括了 umi-plugin-antd-icon-config，只需要安装 @umijs/preset-ant-design-pro 即可。

代码改动

connect，ConnectProps, getLocale, setLocale，formatMessage，Dispatch，Link，FormattedMessage，Reducer，Effect，AnyAction 全部修改为从 umi 中导入。统一了导入路径。

原有的 umi-plugin-react/locale 被废弃，所有从 umi-plugin-react/locale 中导出的皆可从 umi 中导入，原有的 router 修改为 history，api 不变。

lint 和 typescript 类型问题

由于 umi@3 使用了运行时类型，所以在依赖安装完成之时 lint 与 typescript 可能报错，这是因为定义文件没有生成导致的，我们可以执行的 npm run lint 或 ``yarn run umi g tmp 来生成临时文件。如果觉得比较麻烦，可以在 package.json 的 scripts 中做如下配置。

"postinstall": "umi g tmp"

在 umi dev 与 umi build 执行时会自动生成，不会影响正常开发。

具体可以参见这个 diff。

Upgrading umi@3 has minor changes, mainly due to the configuration of the plugin and changes in the import content. It should be noted that umi@3 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 umi@3.

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 umi@3.

@ 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.

🕵🏻‍♀️ question

Source

chenshuai2144

👍3

Most helpful comment

升级 umi@3，最大的感受就是明面上乱七八糟的 lib 少了一些，看着没那么糟心了（强迫症患者），然后就是统一从 umi 中导出，使用成本低一些了

liuxinqiong on 23 Mar 2020

👍2

All 16 comments

赞👍

tomgao365 on 23 Mar 2020

config.ts 中配置 icon 图标的问题呢

liuxinqiong on 23 Mar 2020

👍1

@liuxinqiong

这里分别是 config 中配置，和异步加载的解决方案
https://prolayout.ant.design/menu#%E4%BB%8E%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%8A%A0%E8%BD%BD-menu-%E5%B9%B6%E4%B8%94%E4%BD%BF%E7%94%A8-icon

https://pro.ant.design/blog/antd-4.0-cn

chenshuai2144 on 23 Mar 2020

@chenshuai2144

感谢回复，我装上 umi-plugin-antd-icon-config 就可以了，我看你把依赖删除了，就以为不需要了

liuxinqiong on 23 Mar 2020

@umijs/preset-ant-design-pro 里面包括了 umi-plugin-antd-icon-config
Pro 升级 umi@3 这个文档要说明一下
https://pro.ant.design/blog/antd-4.0-cn 要也要注明一下