不积跬步--react 适配IE 10浏览器实践

这篇文章主要是记录react 在适配IE10的过程中碰到的问题以及解决方法，这样以后有方便查找。
其实支持react在ie10上面运行，需要我们把我们使用的ES6代码转为ie10浏览器支持的ES5,我们可以通过下面这个网址来查看各大浏览器对ES6的支持程度。
环境背景：react-dva-roadhog

kangax.github.io/compat-table/es6/

这个是ECMAScript 6 入门中提供的。

下面正式开始吧：

使用 CommonJS

强烈推荐使用 CommonJS 风格来引入需要的模块。

首先安装这些模块：

npm install --save es5-shim console-polyfill

然后把以下代码插入到入口文件的最前面：

require('es5-shim');
require('es5-shim/es5-sham');
require('console-polyfill');

参考一个真实的例子:React IE8 Hello World Example。

错误 Expected identifier

原因：代码中国或者第三方模块中使用了保留字，比如default。

解决方案：使用 es3ify 或者 es3ify-loader

示例：Fetch IE8;

错误 Exception thrown and not caught

原因：babel 把export * from 'xxx' 编译成了 Object.defineProperty，而 IE8 中不支持 accessor property

解决方案：把 require('es5-shim') require('es5-shim/es5-sham') 插入到入口文件的最上方，并且在代码中不要使用export * from 'xxx'

示例：Hello World

错误 Object expected

原因：可能你使用了 fetch

解决方案：用 es6-promise 和 fetch-ie8 polyfill

示例：Fetch IE8;

错误 'Promise' is undefined

原因：Promise 需要 polyfill

解决方案：用 es6-promise polyfill

示例：Fetch IE8;

错误 Object doesn't support this property or method

原因：可能你使用了 Object.assign

解决方案：用 core-js polyfill

示例：Object Assign

错误 'JSON' is undefined

原因：需要使用 IE8 Standards Mode

解决方案：

添加  和 

示例：Hello World

上面这一套组合拳下来，入口文件前面插入的代码变成了下面：

"use strict";
require('es5-shim');
require('es5-shim/es5-sham');
require('console-polyfill');
require('es6-promise');
require('core-js');
import '@babel/polyfill';
import 'url-polyfill';

错误：Error: index.a0a9eebd.js from UglifyJs

原因：在我们打包文件时里面有es6的代码，从而造成压缩失败。

解决方案：可以参考我的另一篇文章：不积跬步--Error index.a0a9eebd.js from UglifyJs 的解决过程

错误：调用接口数据没有返回，传输了中文

原因：这个一般表现为在chrome浏览器上页面可以正常显示，而在ie10上面却不行，可以检查一下接口传输的数据是否传输了中文。如果传输了中文，那么就需要进行转码。

解决方案：可以通过encodeURIComponent()或者encodeURI()来进行转码。

示例：没有，自己百度。

错误：为适配ie10浏览器，不可以这样写

错误的写法：

class Person extends React.Component {
    state = {
       name:this.props.name
    };
}

或者

constructor(props) {
    super(props);
    // SCRIPT5007: 无法获取属性 "b" 的值，对象为 null 或未定义
    this.a = this.props.b;
}    

原因：在构造函数里不能使用 this.props.xx

解决方案：改为正统写法,不用this.props.xxx，使用继承的props

class Person extends React.Component {
    constructor(props){
        super(props)
        this.state = {
               name:props.name
        };
    }
}

错误：无法获取属性 xxx 的值，对象为 null 或未定义

原因：这种情况一般是组件继承后，无法继承到在构造函数里定义的属性或方法，同样类属性或方法也同样无法继承。

解决方案：使用babel-preset-es2015-ie
安装：

npm install --save-dev babel-preset-es2015-ie

然后在.babelrc文件中添加：

{
  "presets": ["es2015-ie"]
}

参考：React+Webpack+Antd+Babel 兼容低版本浏览器

IE 浏览器滚动条无法滑动或者按钮无法点击或者其他的事件无法响应，都可以参考这一条

原因：IE10或者更低版本在解析html的时候，用的是盒模型，如果发现无法点击或者无法滑动的时候，通过查看元素来确认是否有遮罩，从而造成点击事件无法传递到下面。

解决方案：在遮罩的下一层布局添加如下css:

position:relative;
z-Index:99

把遮罩下一层的div整体抬起来，抬到遮罩的上层，这样就可以传递事件了。

在我们的代码里是LabExam.less下

.LabExam{
  :global{
    .ant-row-flex-space-between{
      min-height: 362px;
    }
    .ant-table {
      position: relative;
      z-index: 99;
    }
  }
}

由于公司要求需要适配IE10浏览器，所以以后肯定会碰到更多的问题，会及时更新在这里。

参考文章：
react 项目的一个ie8兼容性问题
React+Webpack+Antd+Babel 兼容低版本浏览器
使用dva和ant-design组件在IE中的兼容问题记录
Make your React app work in IE8
使用 ES6 的浏览器兼容性问题