公司项目落地,中台使用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插件里有引用的。