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

  1. - "umi": "^1.3.17",
  2. + "umi": "^2.0.0-beta.16",
  4. - "umi-plugin-dll": "^0.2.1",
  5. - "umi-plugin-dva": "^0.9.1",
  6. - "umi-plugin-routes": "^0.1.5"
  7. + "umi-plugin-react": "^1.0.0-beta.16",

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

环境变量

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

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

然后新建 .env，（其中 COMPILE_ON_DEMAND 已不再支持）

  1. BROWSER=none
  2. 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，

  1. export default {
  2.   plugins: [
  3. -    'umi-plugin-dva',
  4. +    ['umi-plugin-react', {
  5. +      dva: true,
  6. +      antd: true,  // antd 默认不开启，如有使用需自行配置
  7. +    }],
  8.   ],
  9. };

更多 dll、hardSource、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 实现的。

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

详见 umi/dynamic 接口说明。