记录 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开发中遇到的坑也会持续更新在这篇文章中