umi3 + ant design pro 兼容 IE11 遇到的问题

直接回答：umi 项目要兼容 IE11，得把 targets 配成 ie: 11 并补上 polyfill，重点是 node_modules 里的依赖默认不会做语法降级，要用 extraBabelIncludes 把它们加进来。

首先，umi官方似乎就写了一下config里的target配置 targets: { ie: 11, },再加上此配置后运行，在IE11下还是报错：未知字符，原因是IE11不支持模板字符串。此时config里还需加上：

复制{
    ...
    targets: { ie: 11 },
    esbuild: { target: 'es5' },
}

此时满怀期待执行，未知字符是没有了，又出现一个问题，页面都是异步加载的，应用正常运行也没有报错，路由跳转到首页后，包含antd form的页面渲染不出来（在chrome正常），页面一直显示loading中，控制台也没有输出错误。

第一个想法是版本问题，经过多次尝试，固定了以下几个版本后在IE11正常运行：

原因还不知…还请大佬指教。

复制//package.json
"dependencies": {
    ...
    "@ant-design/pro-form": "1.33.1",
    "@ant-design/pro-layout": "6.23.4",
    "@ant-design/pro-table": "2.47.1",
    "@umijs/route-utils": "1.0.37",
    "antd": "4.16.10",
    "react": "17.0.2",
    "umi": "3.5.18"
},
"devDependencies": {
    ...
    "@babel/core": "7.4.5",
    "@umijs/fabric": "2.6.2",
    "@umijs/openapi": "1.1.19",
    "@umijs/plugin-blocks": "2.2.2",
    "@umijs/plugin-esbuild": "1.3.1",
    "@umijs/plugin-openapi": "1.3.0",
    "@umijs/preset-ant-design-pro": "1.3.3",
    "@umijs/preset-dumi": "1.1.24",
    "@umijs/preset-react": "1.8.22",
    "@umijs/yorkie": "2.0.5"
}

再分享一下遇到的另外一个问题，使用了umi官网写的splitChunks在打包时遇到了报错：

1	chunk of vendors not found

贴一下config里的splitChunks的配置：

复制{
  ...
  chunks: ['vendors', 'umi'],
  chainWebpack: (config) => {
    config.merge({
      optimization: {
        splitChunks: {
          chunks: 'all',
          minSize: 30000,
          minChunks: 3,
          automaticNameDelimiter: '.',
          cacheGroups: {
            vendor: {
              name: 'vendors',
              test({ resource }) {
                return /[\\/]node_modules[\\/]/.test(resource);
              },
              priority: 10,
            },
          },
        },
      },
    });
  }
}

经测试，我在项目中遇到这个问题的原因是因为引入了package.json中没有的npm包，比如query-string和moment库，在安装antd和ant design pro时是会自动安装的两个库，当项目代码中引入了而项目的package.json中没有，在提取vendors时报错。

如果都排除了还是报这个错误的话，可以尝试下安装`swagger-ui-react`这个库，这个是umi插件里有引用的。

这篇笔记整理自我自己的实践记录，如果做法有出入，或者你踩过别的坑，欢迎到留言板一起聊聊。