快速升级到 [email protected]

xiaohuonichenshuai2144crazyurusAliThink
上次修改时间:2020-09-10 15:43:21

升级 [email protected] 改动较小,主要是插件的配置,与 import 内容的变化。需要注意的是 [email protected] 会自动导入以 umi-plugin@umijs 开头的插件。

配置

tsconfig

tsconfig  中增加

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

此举是为了支持 [email protected] 的新别名 @@

config.ts

  • lessLoaderOptions 修改为 lessLoader
  • umi 会自动使用 package.json 中,以 @umijsumi-pluginumi-preset 开头的包名,请在 plugins 配置中移除相关插件
  • 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"
}

更多配置层面的改动可以看迁移到 [email protected]

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

代码改动

connectConnectProps, getLocale, setLocaleformatMessageDispatchLinkFormattedMessageReducerEffectAnyAction 全部修改为从 umi 中导入。统一了导入路径。

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

lint 和 typescript 类型问题

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

"postinstall": "umi g tmp"

umi devumi build 执行时会自动生成,不会影响正常开发。

具体可以参见这个 diff