React18、19如何兼容 IE9、IE10

linsk19982026-07-28 9:37

首先我们需要为项目处理好babel和polyfill，这个我就不介绍了。

处理完babel和polyfill后，我们可以发现IE11就能运行了，IE10不能运行。这是怎么回事呢？调试一下，我们就能发现关键代码：

typescript 复制代码

function resolveUpdatePriority(): EventPriority {
  // ...
  const currentEvent = window.event;
  // IE11 is undefined, IE10 is null
  if (currentEvent === undefined) {
    return DefaultEventPriority;
  }
  return getEventPriority(currentEvent.type);
}

其中的window.event，由于IE10为null，IE11为undefined就导致IE10在后面的currentEvent.type报错了。

undefined和null有什么区别？

作为前端界的八股题，相信大家都学过：null的语义是"有意的空值 "，undefined的语义是"变量尚未被定义 "。在大多数情况下，如果一个特性还不支持，应当是undefined；如果支持这个特性，但是此时没有值，应当是null，document.currentScript就是一个很好的示例。

但是window.event是一个特例 ，因为window.event是IE先出的，后有的规范。如果把空值定为null，就会导致有现存的网站可能把新浏览器判定为IE，所以window.event的规范空值是undefined。

因此我们在window.event判断时，使用window.event == null判断即可。但是React中window.event用===undefined来判断也不能说它是错的。所以我们不改react源代码，而是通过polyfill来解决。

解决方案：注入 Polyfill

首先安装插件rollup-plugin-polyfill-inject。rollup-plugin-polyfill-inject是一个专业的polyfill注入插件。

bash 复制代码

npm i -D rollup-plugin-polyfill-inject

然后配置插件，以下配置仅供参考，如果你的构建工具支持"按条件加载"，可以配置只有低版本浏览器使用插件。

javascript 复制代码

polyfill({
    getter: {
        'window.event': "@/utils/getEvent"
    },
    include: [
        "**/node_modules/react-dom/**/*"
    ]
})

然后去编写src/utils/getEvent。

javascript 复制代码

export default function getEvent() {
	return window.event || undefined;
};

最后我们构建后看看效果

果然成功了。