最完整的React+Redux+router兼容ie8 修改！！！！

     來源：http://blog.csdn.net/zjw0742/article/details/52981706

 最近的一個項目使用的是React+React-router+Redux框架，剛開始編寫代碼的時候，客戶的需求不明確，沒有明確要求兼容IE8,當第一個版本出來以後，用戶發現不能在IE8下使用，才提出兼容IE8的事情。但當時總體的代碼框架和主要功能都已經實現，若是更換框架來實現，至關於放棄前面幾個月的React代碼重寫。這帶來的工做量是難以估計的。

      查找網上的React兼容IE8的方法，也發現很多的項目去兼容，並且都修改爲功了，但我按照他們的修改方法去改個人框架的時候仍是發現不少細節和他們的不同。下面進行一個修改總結：

      1、按照官方微博的公佈信息，支持ie8的最高版本是react@0.14版本，若是高於這個版本則是不兼容IE8的，因此得肯定你使用的react版本不高於0.14。根據官方的說法，兼容的方法只須要在index.html中引入es5-shim.js和es5-sham.js(能夠經過百度 搜索下載)這兩個文件就行，這兩個文件是一個將es5語法修改兼容es3語法的polyfill，但在項目實際添加了這兩個文件後，仍是會報一些錯誤。

     2、確保使用的Jquery版本是1.x.x的版本，IE8不支持Juqery2.x的版本。若是你使用了BootStrap框架，這個框架須要最低的Jquery版本是1.9以上。

     3、對於另外兩個框架 ，我使用的是"react-redux": "^4.4.1","react-router": "^1.0.3"。

     4、須要在package.json中加入如下的幾個依賴包：

     "console-polyfill": "^0.2.2",
    "es5-shim": "^4.4.1",
    "eventsource-polyfill": "^0.9.6",
    "fetch-ie8": "^1.4.0",

   "babel-polyfill": "^6.7.4",

 

     加入以上幾個依賴包後，在本身的前端程序入口的地方，把上面的幾個安裝包引入程序當中：

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

    5、以上的步驟完成後，ie8仍是會報錯，主要是Object.defineProperty函數相關的錯誤。這個時候須要一個關鍵的步驟在package.json中加入

        "es3ify-loader": "^0.2.0",

         這是一個將es五、es6語法轉換成es3語法的包，這個包不須要在代碼中引入到程序中，而是當咱們的APP.js打包完成後，再使用這個loader進行再次的打包，個人app.js是採用gulp打包的，但es3ify-loader 只能用webpack打包工具

來進行調用，因此須要在項目目錄安裝webpack，輸入命令：npm install -g webpack。同時在目錄下建立webpack.config.js，裏面內容是：

var webpack = require('webpack');
 
module.exports = {
    //頁面入口文件配置，這裏是用gulp打包出來的app.js
    entry: {
        index : './build/app.js'
    },
    //入口文件輸出配置，這裏須要設置對app.js打包後獲得的文件名稱
    output: {
        path: './',
        filename: 'bundle.js'
    },
    module: {
        //加載器配置，這裏使用es3ify-loader對app.js進行再次打包；
        loaders: [
             {
                test: /\.js?$/,
                loaders: ['es3ify-loader'],
             },
        ]
    },
};

 

以上步驟完成後，在項目目錄下輸入命令：webpack  則會自動開始打包，打包後本級目錄下會生成bundle.js；

6、完成上述步驟後，就完成了React+Redux+Ruoter框架在IE8下的兼容性修改。這是個人完整修改過程，修改完成後程序順利在IE8下運行起來了，因爲整個前端編寫的是一個單頁應用，在IE8下頁面切換刷新仍是比較慢的。

7、總結：本人第一次作React在IE8的兼容修改，若是你看到本文有任何疑問能夠和我聯繫(QQ1285102881)，或者直接留言。

新增記錄：通過查找有一個

var es3ify = require("gulp-es3ify");

 

gulp.task("javascripts", function () {

    return gulp.src("src/index.js")

        .pipe(es3ify())

        .pipe(gulp.dest("dist"));

});

這樣的gulp插件，最終能夠搭建一個編輯代碼自動刷新，同時兼容ie8的開發環境，超級好用~~~

最後附上github地址：https://github.com/GarveyZuo/React-router-redux-IE8/

你們記得給我star哈~~~~