查找網上的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.jsentry: {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"));});

總結

以上是生活随笔為你收集整理的React兼容IE8的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。