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

「点点赞赏,手留余香」

3

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 分享umi3+ant design pro兼容IE11所遇到的问题

发表回复