react redux work in ie8

搭建项目

• create-react-app生成一个react项目
• 将项目中react&&react-dom版本降到0.14.*
• 增加兼容包

import 'babel-polyfill';
import 'console-polyfill';
import 'fetch-ie8';
import 'es6-promise';

• 让浏览器支持es5的特性，可以扔到自己CDN上

<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>

• 引用es3ify-loader 解决es3语法兼容问题

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

• ie8中 缺失：报错 ，注释掉node_modules/ansi_html/index.js 142-149行

// ansiHTML.tags = {
//   get open() {
//     return _openTags;
//   },
//   get close() {
//     return _closeTags;
//   }
// };

• ie8中router失效问题，router降级到1.*

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

• UglifyJsPlugin压缩后出现问题

new webpack.optimize.UglifyJsPlugin({
      compress: {
          screw_ie8: true, // React doesn't support IE8
          warnings: false
      },
      mangle: {
          screw_ie8: true
      },
      output: {
          comments: false,
          screw_ie8: true
      }
 })

---

主要包版本

"react": "^0.14.2",
"react-dom": "^0.14.2",
"react-router": "^1.0.3",
"redux": "^3.6.0",
"react-redux": "^3.1.2",
"redux-thunk": "^2.2.0"

---

参考资料

• https://github.com/facebookincubator/create-react-app
• https://github.com/xcatliu/react-ie8
• https://github.com/es-shims/es5-shim
• https://facebook.github.io/react/docs/refs-and-the-dom.html
• https://github.com/xcatliu/react-ie8
• https://github.com/ReactTraining/react-router/pull/1158

---

开发遇到的问题

• input和label，点击label不会触发radio change事件。
• 原因，input display:none||visibility: hidden;，IE无法触发不显示元素的事件
• 解决方案，不想显示input，透明度置0