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

公司项目落地，中台使用 ant design pro 搭建，在提出需要兼容 IE11 时进行操作的时候遇到点儿问题分享一下。

首先，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在打包时遇到了报错：

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 插件里有引用的。

以上关于分享umi3+ant design pro兼容IE11所遇到的问题的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。