查詢網上的React相容IE8的方法，也發現不少的專案去相容，而且都修改成功了，但我按照他們的修改方法去改我的框架的時候還是發現很多細節和他們的不一樣。下面進行一個修改總結：

一、按照官方微博的公佈資訊，支援ie8的最高版本是[email protected]版本，如果高於這個版本則是不相容IE8的，所以得確定你使用的react版本不高於0.14。根據官方的說法，相容的方法只需要在index.html中引入es5-shim.js和es5-sham.js(可以通過百度 搜尋下載)這兩個檔案就行，這兩個檔案是一個將es5語法修改相容es3語法的polyfill，但在專案實際添加了這兩個檔案後，還是會報一些錯誤。

二、確保使用的Jquery版本是1.x.x的版本，IE8不支援Juqery2.x的版本。如果你使用了BootStrap框架，這個框架需要最低的Jquery版本是1.9以上。

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

四、需要在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');

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

  "es3ify-loader": "^0.2.0",

這是一個將es5、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；

六、完成上述步驟後，就完成了React+Redux+Ruoter框架在IE8下的相容性修改。這是我的完整修改過程，修改完成後程式順利在IE8下執行起來了，由於整個前端編寫的是一個單頁應用，在IE8下頁面切換重新整理還是比較慢的。

七、總結：本人第一次做React在IE8的相容修改，如果你看到本文有任何疑問可以和我聯絡(QQ1285102881)，或者直接留言。

新增記錄：經過查詢有一個

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

 

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

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

        .pipe(es3ify())

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

});