前端IE8兼容问题修改

react redux router antDesign ie8

备注：development_hot环境不支持IE8，请设置环境变量为ie8_production： export NODE_ENV=ie8_production

1. package.json修改：
增加如下配置，增加兼容IE8相关的shim或polyfill：

    "console-polyfill": "^0.2.2",
    "es5-shim": "^4.4.1",
    "es3ify-loader": "^0.2.0",
    "es6-promise": "^3.0.2",
    "fetch-ie8": "^1.4.0",
    "core-js": "^2.0.2",
    "html5shiv": "^3.7.3",
     "jquery": "^1.7.2"

2..babelrc配置文件修改：
去掉如下代码（开发环境的热加载需要去掉，热加载暂不支持IE8）：

    "development": {
      "presets": ["react-hmre"]
    },

3. webpack中_base.js修改：
头部的import修改为require引用，如下：

const webpack = require('webpack');
const config  = require('../../config');
const HtmlWebpackPlugin = require('html-webpack-plugin');

babel-loader中的热加载选项去掉。配置如下：

    {
        test : /\.(js|jsx)$/,
        exclude : /node_modules/,
        loader  : 'babel'
      }

增加es3ify-loader 解决default在IE8中作为保留字不能识别问题

 postLoaders:[
      {
        test:/\.js$/,
        loaders:['es3ify-loader']
      }
    ]

4.index.html修改：
增加如下代码，支持IE

<meta http-equiv="x-ua-compatible" content="ie=edge"/>

5.index.js中修改：
入口文件的import修改为require

/** 
  * 以下require要放在文件最开始，且不能使用'import'，因为babel会把'
  * import'转译为`Object.defineProperty`，IE8不支持该语法 
  * (但是在 `require('es5-shim')`后就会被转译为支持的语法). 
  */ 
require ('es5-shim');
require ('es5-shim/es5-sham');
require ('console-polyfill');
require('es6-promise');
require('fetch-ie8');
require('core-js/fn/object/assign');
require ('babel-polyfill');
require ('html5shiv');
/** 
  * 全局定义jquery，antDesignve中Velocity在IE8下需要加载jquery
  */ 
window.jQuery = require('jquery');
/** 
  * 以下不能使用'imoprt',因为import会在`require('es5-shim')`之前执行
  */ 
const React =  require('react');
const ReactDOM = require('react-dom');
const createRoutes = require('./framework/routes');
const  configureStore = require('./framework/configureStore').configureStore;
const Provider = require('react-redux').Provider;
const loginUserSuccess = require('./framework/actions').authActions.loginUserSuccess;
const {Router,hashHistory,browserHistory} = require('react-router');
const syncHistoryWithStore = require('react-router-redux/lib/sync').default;

6.antDesign相关修改：
(1)报错：Velocity: IE8 and below require jQuery to be loaded before Velocity
原因：antDesign中使用了Velocity，Velocity在IE8以下浏览器需要增加jQuery的依赖
解决方法：增加jquery模块，在首页index.js中引入全局jquery

window.jQuery = require('jquery');

(2)图标组件使用 iconfont.cn，默认公网可访问。但是在没有网络的时候，需要本地部署。并且由于antDesign中less样式文件IE8不兼容，修改为本地加载。

7.其它修改：
(1)由于react-router-redux的index.js中使用了export xx from xx的语法，这种语法babel会转译为bject.defineProperty，这种语法在IE8中不支持，因此我们在引用的时候需要做如下修改：
修改前：

import { push, routerActions } from 'react-router-redux';

修改后：

import {push, routerActions} from 'react-router-redux/lib/actions';

备注：以后代码中，为了兼容IE8引用react-router-redux相关内容时,不能直接引用，需要引用到具体的js。

(2)代码中不能写export * from xxx的语法

(3)由于将src/framework/actions/index.js中内容修改为：

import * as authActions  from './auth';
import * as menuActions  from './menu';
import * as userActions  from './user';
import * as supportActions  from './support';
export {authActions};
export {menuActions};
export {userActions};
export {supportActions};

在其他文件引用的时候需要进行修改，如需要调用supportActions中方法，引用时如下：

import { supportActions } from '../actions';
//采用如下方式进行调用
supportActions.initialize();

(4) 在执行checkBrowserSupport方法时失败，返回reject()
解决方法：去掉了'addEventListener' in window的判断

(5)react-charts.js修改
修改源码(暂未提交)，参照 https://github.com/jhudson8/react-chartjs/issues/69

(6)登陆页面样式修改
登陆页面之前采用antDesign的Flex布局，但是Flex布局在IE8下不能很好地显示，修改为普通布局+css实现相同的显示效果。

7. 遗留问题：

问题1：webpack配置文件中分开app\vendor打包后一直报错forEach()方法支持，打成一个包正常，原因未查明。
问题2：react-router中使用了Object.defineProperty，IE8中不支持，该问题暂未找到合适的方法，修改了源码，将源码中相关内容修改了。
问题：css3样式IE8兼容问题 ，placegolder IE8不支持