【入門】1.2-快速升級到 umi@3

升級 umi@3 改動較小，主要是插件的配置，與 import 內容的變化。需要注意的是 umi@3 會自動導入以 umi-plugin 或@umijs 開頭的插件。

1. 配置

1.1 tsconfig

tsconfig.json 中增加

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

此舉是爲了支持 umi@3 的新別名 @@。

1.2 config.ts

• lessLoaderOptions 修改爲 lessLoader
• 移除 plugins 字段，umi 已經修改爲自動掃描 package.json
• cssLoaderOptions 修改爲 cssLoader
• IConfig 修改爲 defineConfig，從 umi 中直接引入
• umi-plugin-react 的 dynamicImport，配置提升到第一級。

1.3 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 即可。

2. 代碼改動

connect，ConnectProps, getLocale, setLocale， formatMessage， Dispatch， Link， FormattedMessage，Reducer，Effect，AnyAction 全部修改爲從 umi 中導入。統一了導入路徑。

原有的 umi-plugin-react/locale 被廢棄，所有從 umi-plugin-react/locale 中導出的皆可從 umi 中導入，原有的 router 修改爲 history，api 不變。

2.1 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。