UMI + antd 兼容ie11踩坑记录

1,284 阅读1分钟

umi的配置项中有自带的兼容ie的配置

官方配置

在.umirc.ts的配置中增加targets:{ie:11},注意是targets 不是target

image.png

配置完之后,打包的时候就会自动安装对应的polyfill跟@babel以兼容ie11

1、配置完成之后,控制台仍然报错:无效字符 是因为ie11不支持模版字符串 反引号 `` 跟 ${}拼接

企业微信截图_16638155124040.png

需要继续加上esbuild:{ target: 'es5' }

借鉴:umi3+ant design pro兼容IE11实例及所遇到的问题分享

image.png

2、报错语法错误:ie11不支持箭头函数,需要改成普通函数

这种事情本应该是umi自动化给我们降级将好的,但是配置好之后发现控制台仍然报错。 找了网上的经验umi 兼容ie11 按照官方配置还是失败处理 nodeModulesTransform 配置为all ,编译速度慢了,但是兼容性就好了,到这里基本上就没多少语法错误了 image.png

3、还有就是在document.ejs文件中写的原生script,就是编译的入口html文件,也是不编译的,在这里的script中写代码也同样不支持箭头函数、async await、promise、模版字符串等等

image.png

4、css问题:不支持box-shadow 写法,就用border吧。

5、css问题:不支持var(变量)全局变量样式,可以使用css-vars-ponyfill这个插件可以直接转换ie11中css的var变量解决兼容性

不使用umi的情况下,自行找对应的版本降级包进行导入