记录 react+antd 兼容 ie8 的一些坑

Home

因为毕设要求兼容ie8,所以这几天先把整个开发框架搭出来了,我整理过后会发出来

配置主要参考了以下链接:

React

首先,ReactV15不支持ie8,所以我只能妥协使用0.14的版本,由于ie8一些功能的缺失,需要引入一些库:

  • es5-shim:es5兼容库
  • es3ify-loader:解决es3语法兼容问题
  • es6-promise:promise的一个polyfill
  • console-polyfill:由于ie8的奇葩特性,在打开控制台时才会有console属性,所以console也需要一个polyfill

antd

接着,我引入了antd,最开始我使用的时0.12.x版本

引入后报错,发现antd依赖的一个库Velocity.js在低版本的ie下需要jq辅助,遂在全局引入jq

继续测试时发现,在build之后,icon显示不正常,诡异的是,字体文件是向file://也就是本地文件请求,但应该通过http请求才对,查看源码,它的css文件中font-face的属性是src:url('//at.alicdn.com/xxxxx'),我自己写了一个css文件加上了https,覆盖了这个style,解决了这个问题。 最后,我把antd升级到了^1.11.6版本,其font-face的src: url('https://at.alicdn.com/xxxx'), 已经加上了https,就不用多管了。

router

本来我是想自己写一个router的,但图方便,还是看看router的兼容性怎么样

最开始,我直接引入了react-router-dom@^4.2.2,报了Exception thrown and not caught的错,一看,是代码里出现了Object.defineProperty,这个方法很坑,模拟不了,加什么polyfill都没用,司徒正美说通过VBScript实现了,我没深究,感兴趣的可以研究一下。出现Object.defineProperty是因为babel把export * from 'xxx这种格式的代码转化为Object.defineProperty实现了。 我看了下react-router-dom的源码,很规矩的先引入再输出,并没有连在一起,但在其依赖库的history中出现了这种代码:

JS
export { createLocation, locationsAreEqual } from './LocationUtils'

最后被babel转成了Object.defineProperty, 我当时想了两种解决方法,一是改源码,二是降级,最后我选择了降级,使用了react-router@2.3.0,不过这个版本的react-router写起来很难受,地址后面还要跟一串字符,体验很差。

一个简单的框架就搭起来了,但这才是刚刚开始,后续根据需求会考虑引入redux等,我在ie8开发中遇到的坑也会持续更新在这篇文章中