react怎么支持ie8

這篇文章主要介紹“react怎么支持ie8”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“react怎么支持ie8”文章能幫助大家解決問題。

在react中，支持ie8的最高版本是“react@0.14”版本，若高于這個(gè)版本都是不兼容ie8的；可以利用在“index.html”文件中加入“es5-shim.js”和“es5-sham.js”這兩個(gè)文件的方法使react兼容ie8。

本教程操作環(huán)境：windows10系統(tǒng)、ECMAScript 6.0版、Dell G3電腦。

react幾支持ie8

在react的官方公布的信息中，它支持 IE8 的最高版本是 react@0.14 版本。

如果我們高于這個(gè)版本的話就會(huì)出現(xiàn)一些問題，而且還不能兼容我們的版本，所以在我們使用的過程中要確認(rèn)使用的react版本是否有大于react0.14版本，

當(dāng)然在官方中還給出了兼容的方法，就是在我們的index.html文件中加入es5-shim.js和es5-sham.js這兩個(gè)文件就可以了，

而且我們還要確保使用的 jQuery 版本是不大于 jQuery2.0 的版本，因?yàn)樵?IE8 中不支持 jQuery2.0及以上的版本。如果你是使用 bootstrap 框架的話我們的 jQuery 的版本最低要用 jQuery1.9 以上的版本。

react是是 Facebook 推出的一個(gè)用來構(gòu)建用戶界面的 JavaScript 庫。 React主要用于構(gòu)建UI，很多人認(rèn)為 React 是 MVC 中的 V（視圖）。React 擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關(guān)注和使用它。

ReactJS是一套JavaScript Web庫，由Facebook打造而成且主要用于構(gòu)建高性能及響應(yīng)式用戶界面。React負(fù)責(zé)解決其它javascript框架所面對(duì)的一大常見難題，即對(duì)大規(guī)模數(shù)據(jù)集的處理。能夠使用虛擬DOM并在發(fā)生變更時(shí)利用補(bǔ)丁安裝機(jī)制只對(duì)DOM中的dirty部分進(jìn)行重新渲染，React得以實(shí)現(xiàn)遠(yuǎn)超其它框架的速度表現(xiàn)。

擴(kuò)展知識(shí)：

查找網(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語法修改兼容es3語法的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語法轉(zhuǎn)換成es3語法的包，這個(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 = {
    //頁面入口文件配置，這里是用gulp打包出來的app.js
    entry: {
        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īng)用，在IE8下頁面切換刷新還是比較慢的。

關(guān)于“react怎么支持ie8”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。