React全家桶框架兼容IE8教程

本着学习的目的，在react-family框架基础上，作了最小的修改，使框架兼容了IE8浏览器。

预览地址：https://brickspert.github.io/react-family-ie8/index.html
源码地址：react-family-ie8

这是一个痛苦的过程，不过看到结果仍是很是开心的。

下面就让咱们开始吧。

第一部分，咱们先修改开发坏境及开发配置文件~

1. react降级

   `npm install react@0.x.x react-dom@0.x.x --save`

2. webpack降级到v1

   备注：网上也有不少人说，webpack v3也能兼容IE8，可是我试了很长时间也没搞好。被迫降版本了，这里应该是个人问题。
   
   `npm install webpack@1.x.x  webpack-dev-server@1.x.x --save-dev`

3. babel-loader降级

webpack 1.x 对应 babel-loader <= 6.x

npm install babel-loader@6.x.x --save-dev

1. 修改webpack配置文件，至兼容v1的状态。在咱们的项目中，主要修改

   `webpack.common.config.js`和`webpack.dev.config.js`里面的`module->rules`,改回`loaders`。

2. 删除react-hot-loader相关的代码

   • webpack.dev.config.js 直接删除entry，删除尾部的webpack.merge的自定义函数。
   • .babelrc
   • src/index.js
3. new webpack.HashedModuleIdsPlugin()删除。由于这不是webpack v1的。
4. 如今就能够npm start启动了，IE8浏览器打开来，你发现是空白的。不要紧，打开调试器，看什么错误。

这里注意下，我用虚拟机经过局域网IP访问的，直接打不开页面，报错Invalid Host header。

修改package.json->start命令，增长--public 192.168.x.x ，后面的IP为你的局域网IP就能够啦。

1. 接着说错误。如今咱们看到的脚本错误应该是“缺乏标识符”。

   参考[这里](https://github.com/xcatliu/react-ie8),咱们使用`es3ify`。
   
   `npm install --save es3ify-webpack-plugin`
   
   `webpack.commn.config.js`使用插件。

2. 再npm start，发现错误换了，“对象不支持此属性或方法”。

   此次咱们使用`es5-shim`。
   
   `npm install --save es5-shim`
   
   `webpack.common.config.js`修改入口`entry->app`

   app: [
           "es5-shim", "es5-shim/es5-sham",
           "babel-polyfill",
           path.join(__dirname, 'src/index.js')
       ]

   这里我有个问题，必须删除`entry`里面的`vendor`和`plugins`里面`CommonsChunkPlugin`相关的代码。
   
   不删除IE8就一直报错，我开始猜是要把`es5-shim/shame/babel-polyfill`等提取出来，独立于`app`和`vendor`。可是提取了仍是不行唉，学艺不精~只能先删除了。

3. 继续执行，又是错误“例外被抛出且未被接住”。

   `npm install export-from-ie8 --save`
   
   而后`webpack.common.config.js`使用

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

4. 如今你再执行，发现IE8能够正常访问了。嘿嘿嘿。最好咱们把BrowserRouter改为HashRouter，这样路由切换页面就不会刷新啦。

到目前为止，开发坏境已经OK了，下面就是修改生产坏境的配置文件了。

1. extract-text-webpack-plugin插件降级。

npm install --save-dev extract-text-webpack-plugin@1.0.1

而后按文档修改配置文件。

1. uglifyjs-webpack-plugin增长兼容IE8参数。

作了这两项，你执行npm run bundle，发现生产坏境也OK了。

续

虽然最终作出了兼容IE8的版本，可是还有不少地方搞不太懂的。后续会继续学习，改进，更新的。

作这个任务的时候，参考了不少不少的文章，我就不一一列举了，感谢！