发布 umi 2.1

[sorrycc]

重要改进

• 改进补丁方案，支持通过配置 targets 来自动引入补丁，deprecate umi-plugin-polyfills，#1114
• 支持运行时插件和 src/app.js，#1101
• 改进出错提醒，更加友好和更多可操作的提示，#1093，#1132
• 内置 babel-plugin-macros，#1135
• 锁定 webpack 版本为 4.19.0，因为 webpack@4.19.1 开始和 hard-source-webpack-plugin 不兼容，#1134
• umi-plugin-react 支持配置 chunks、scripts、headScripts、metas 和 links，#1097
• 新增配置项 disableRedirectHoist，可禁用 redirect 上提，#1091

更多变化参考 umi@2.1.0 和 umi@2.1.0-beta.1。

targets 配置

比如我们要支持 ie10，可配置：

export default {
  targets: { ie: 10 },
};

key 可选 chrome, opera, edge, firefox, safari, ie, ios, android, node, electron，值为最低需要支持的版本号。

src/app.js

通过这个文件针对运行时做一些配置，比如修改路由，延迟渲染应用，配置 dva 等。

比如我要延迟 1s 后再渲染应用，可以在 src/app.js 里配置，

export function render(oldRender) {
  console.log('wait for 1s');
  setTimeout(() => {
    console.log('do render');
    oldRender();
  }, 1000);
}

更多参考 runtime/app.js 和 with-dva/app.js。

chunks、scripts、headScripts、metas 和 links

其他应该容易理解，主要介绍下 chunks。

1. chunks 的默认值是 ['umi']
2. css（如果有）和 js 会被自动引入
3. 如果配了 hash: true，会自动处理 hash
4. 会自动处理 publicPath

举个使用场景的例子，比如我们要提 vendors，把 react, react-dom, react-router 等包含进去，应该会这样配，

export default {
  chainWebpack(config) {
    config.optimization.splitChunks({
      cacheGroups: {
        vendors: {
          name: 'vendors',
          chunks: 'all',
          test: /[\\/]node_modules[\\/](react|react-dom|react-router|react-router-dom)[\\/]/,
        },
        commons: {
          name: 'commons',
          chunks: 'async',
          minChunks: 2,
          minSize: 0,
        },
      },
    });
  },
}

然后这个 vendors 的 js 会需要在 umi 之前引入，所以需要配置 chunks: ['vendors', 'umi'] 才可以。

详见例子。

[xiaohuoni]

好奇targets 和umi-plugin-polyfills是什么关系？替代还是补充？

[sorrycc]

@xiaohuoni 代替，umi-plugin-polyfills 在下个大版本会去掉。

[miaozilong]

赞！

[xiaohuoni]

那对于其它的兼容怎么处理？比如3d动画这些。

[qq578023708]

相应的教程在哪里呢? 原来那些教程都是针对UMI@1的, 比如mode部分。

[vincentmrlau]

试用了大佬的umi，开发体验很好；那么问题来了， 公司的项目基本都是基于react-router@4的，有没有升级的方案或者迁移工具，或者说有没有类似的计划

[liudq]

yarn create umi 之后 加入 targets 配置没有起作用呢？ 有人遇到这种情况吗？

[liudq]

@sorrycc
@xiaohuoni 代替，umi-plugin-polyfills 在下个大版本会去掉。

yarn create umi 之后 umi都是最新版本 加入 targets 配置没有起作用呀

[elevensky]

headScripts 里如果配置 [{ src: '//assets.giocdn.com/2.1/gio.js', async: true }]
生成的结果是<script async="true" ... />
但是html标准里

不允许这么写，不知道会不会有问题，影响原有的行为表现。
标准里空字符串倒是等效的，不过正常的情况会给boolean值。

headScripts 里如果配置 [{ src: '//assets.giocdn.com/2.1/gio.js', async: '' }] boolean属性给空字符串可以输出 <script async ... />