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


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

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

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

      一、按照官方微博的公布信息,支持ie8的最高版本是react@0.14版本,如果高於這個版本則是不兼容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"));
});
這樣的gulp插件,最終可以搭建一個編輯代碼自動刷新,同時兼容ie8的開發環境,超級好用~~~

最后附上github地址:https://github.com/GarveyZuo/React-router-redux-IE8/
大家記得給我star哈~~~~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM