查找網(wǎng)上的React兼容IE8的方法，也發(fā)現(xiàn)不少的項(xiàng)目去兼容，而且都修改成功了，但我按照他們的修改方法去改我的框架的時(shí)候還是發(fā)現(xiàn)很多細(xì)節(jié)和他們的不一樣。下面進(jìn)行一個(gè)修改總結(jié)：

一、按照官方微博的公布信息，支持ie8的最高版本是react@0.14版本，如果高于這個(gè)版本則是不兼容IE8的，所以得確定你使用的react版本不高于0.14。根據(jù)官方的說法，兼容的方法只需要在index.html中引入es5-shim.js和es5-sham.js(可以通過百度 搜索下載)這兩個(gè)文件就行，這兩個(gè)文件是一個(gè)將es5語(yǔ)法修改兼容es3語(yǔ)法的polyfill，但在項(xiàng)目實(shí)際添加了這兩個(gè)文件后，還是會(huì)報(bào)一些錯(cuò)誤。

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

三、對(duì)于另外兩個(gè)框架 ，我使用的是"react-redux": “^4.4.1”,“react-router”: “^1.0.3”。

四、需要在package.json中加入以下的幾個(gè)依賴包：

"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",

加入以上幾個(gè)依賴包后，在自己的前端程序入口的地方，把上面的幾個(gè)安裝包引入程序當(dāng)中：

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

五、以上的步驟完成后，ie8還是會(huì)報(bào)錯(cuò)，主要是Object.defineProperty函數(shù)相關(guān)的錯(cuò)誤。這個(gè)時(shí)候需要一個(gè)關(guān)鍵的步驟在package.json中加入

"es3ify-loader": "^0.2.0",

這是一個(gè)將es5、es6語(yǔ)法轉(zhuǎn)換成es3語(yǔ)法的包，這個(gè)包不需要在代碼中引入到程序中，而是當(dāng)我們的APP.js打包完成后，再使用這個(gè)loader進(jìn)行再次的打包，我的app.js是采用gulp打包的，但es3ify-loader 只能用webpack打包工具

來進(jìn)行調(diào)用，所以需要在項(xiàng)目目錄安裝webpack，輸入命令：npm install -g webpack。同時(shí)在目錄下創(chuàng)建webpack.config.js，里面內(nèi)容是：

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

以上步驟完成后，在項(xiàng)目目錄下輸入命令：webpack 則會(huì)自動(dòng)開始打包，打包后本級(jí)目錄下會(huì)生成bundle.js；

六、完成上述步驟后，就完成了React+Redux+Ruoter框架在IE8下的兼容性修改。這是我的完整修改過程，修改完成后程序順利在IE8下運(yùn)行起來了，由于整個(gè)前端編寫的是一個(gè)單頁(yè)應(yīng)用，在IE8下頁(yè)面切換刷新還是比較慢的。

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

新增記錄：經(jīng)過查找有一個(gè)

var es3ify = require("gulp-es3ify");gulp.task("javascripts", function () {return gulp.src("src/index.js").pipe(es3ify()).pipe(gulp.dest("dist"));});

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。