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

2021年3月21日 • ... • ☕️ 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。

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

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

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

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

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

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

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

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

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