antd升级导致的IE11兼容问题“不支持prepend属性或方法”

March 21, 2021 ... ☕️ 3 min read

项目需要兼容IE11,虽然很想吐槽,但是该解决的问题一点不能少。

首先报错是这样:

Object doesn’t support property or method ‘prepend’”

基本意思:对象不支持属性或方法-prepend

咋办,搜索整个项目也没发现任何有调用prepend的地方。看了半天的commits也没发现有问题的代码,尴尬。

polyfill失效了吗

IE11兼容特性,是需要polyfill的,一般在babel的配置文件里就可以做,babel不会把所有的兼容都放进来,只是代码使用到的部分。

那么,既然代码里没有使用到,如果这里手动加入prepend的兼容代码,那么就可以知道,问题出现在依赖包里。

果然,手动加入了兼容代码,问题解决了。

哪个包出了问题

跟着代码看,是ReactIcon - AntIcon相关的,熟悉antd的都知道,4.0开始,图标独立了:

从 4.0 开始,antd 不再内置 Icon 组件,请使用独立的包 @ant-design/icons。

跟踪代码不难找到,问题在这里

react-component/util/src/Dom/dynamicCSS.ts

一个DOM容器调用了prepend的方法。而这个属性IE11不支持。

yarn.lock的作用

最近并没有更新包的版本,但是看了看项目,发现yarn.lock文件被忽略了,而且没有上传初始版本,这就导致,每次通过CI更新,都会自动更新依赖包。

有时候,一些附属依赖包的优化升级,并不会主动更新主包的大版本,只是更新package.json里对应的版本。如果install的时候,会安装同版本的大包,但是小包会拉最新的。所以同版本依赖的包,可能在不同的时间,依赖的包版本并不一致。

比如这个:refactor: use rc-util for csp (#29804)

更多的时候,我们会遇到同样的package.json,在不同的时间,安装到各个设备里,有的能用,有的“明明在他电脑上是好的啊”。

所以通过yarn.lock来锁定版本。文件不仅会描述包自身的版本号,也会锁定所有它依赖的包的版本号

所以,需要把这个文件上传到git,以保证伙伴们在install的时候,大家的版本能保持一致。并且能避免由于开发人员以外更改,导致问题出现。

应该把yarn.lock写到gitignore里吗

简而言之,不应该。尤其是在依赖到模块活跃度相当高的时候,因为越活跃,新功能/新bug产生的几率就越大,锁定yarn.lock可以避免由于这些升级导致问题的发生。

当然,如果你要使用npm而不是yarn,就应该把yarn.lock写进去。反之,应该把package.json写入。

#react

SideEffect is a blog for front-end web development.
Code by Axiu / rss