分享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所遇到的问题