从 umi 1.x 迁移

更喜欢观看视频?可以点此观看

下面以 antd-admin 为例,介绍如何从 umi@1 升级到 umi@2 。

npm 依赖

升级 umi 到 ^2.0.0-0,并使用 umi-plugin-react 代替以前的众多插件,包含 umi-plugin-dva、umi-plugin-dll、umi-plugin-routes、umi-plugin-polyfill 和 umi-plugin-locale。

- "umi": "^1.3.17",
+ "umi": "^2.0.0-beta.16",

- "umi-plugin-dll": "^0.2.1",
- "umi-plugin-dva": "^0.9.1",
- "umi-plugin-routes": "^0.1.5"
+ "umi-plugin-react": "^1.0.0-beta.16",

umi-plugin-react 是一个包含了十多个插件的集合,详见 umi-plugin-react 介绍

环境变量

umi@2 支持在 .env 里配置环境变量,所以之前写在 package.json scripts 里的环境变量可以切到这里。

- "start": "cross-env COMPILE_ON_DEMAND=none BROWSER=none HOST=0.0.0.0 umi dev",
+ "start": "cross-env BROWSER=none HOST=0.0.0.0 umi dev",

然后新建 .env,(其中 COMPILE_ON_DEMAND 已不再支持)

BROWSER=none
HOST=0.0.0.0

另外,有些环境变量有变化或不再支持:

  • 不再支持 PUBLIC_PATH,通过配置 publicPath 实现
  • 不再支持 BASE_URL,通过配置 base 实现
  • 不再支持 COMPILE_ON_DEMAND,umi@2 里没有这个功能了
  • 不再支持 TSLINT,umi@2 里没有这个功能了
  • 不再支持 ESLINT,umi@2 里没有这个功能了

配置

插件配置

由于前面我们把很多插件改成通过 umi-plugin-react 实现,所以需要修改 .umirc.js

export default {
  plugins: [
-    'umi-plugin-dva',
+    ['umi-plugin-react', {
+      dva: true,
+      antd: true,  // antd 默认不开启,如有使用需自行配置
+    }],
  ],
};

更多 dll、polyfilles、locale、title 等,参考 umi-plugin-react 文档

webpackrc.js

umi@2 不再支持 webpackrc.js,把里面的配置原样复制到 .umirc.js 即可。

webpack.config.js

umi@2 不再支持 webpack.config.js,改为通过配置 chainWebpack 实现。

详细的配置项变更

  • 不再支持 hd,如需开启,装载插件 umi-plugin-react 并配置 hd: {}
  • 不再支持 disableServiceWorker,默认不开启,如需开启,装载插件 umi-plugin-react 并配置 pwa: {}
  • 不再支持 preact,如需配置,装载插件 umi-plugin-react 并配置 library: 'preact'
  • 不再支持 loading,如需配置,装载插件 umi-plugin-react 并配置 dynamicImport.loadingComponent
  • hashHistory: true 变更为 history: 'hash'
  • 不再支持 disableDynamicImport,默认不开启,如需开启,装载插件 umi-plugin-react 并配置 dynamicImport: {}
  • 不再支持 disableFastClick,默认不开启,如需开启,装载插件 umi-plugin-react 并配置 fastClick: {}
  • 不再支持 pages,改为直接配在路由上
  • 不再支持 disableHash,默认不开启,如需开启,配置 hash: true

约定式路由

路由层不再支持 page.js 的目录级路由。之前如果有用,需要把不需要的路由通过 umi-plugin-react 的 routes.exclude 排除掉。

umi/dynamic

接口变更,umi@2 是基于 react-loadable 实现的。

- dynamic(async () => {})
+ dynamic({ loader: async () => {}})

详见 umi/dynamic 接口说明