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的版本，可是還有不少地方搞不太懂的。後續會繼續學習，改進，更新的。

作這個任務的時候，參考了不少不少的文章，我就不一一列舉了，感謝！