首頁  >  文章  >  web前端  >  react幾支持ie8

react幾支持ie8

WBOY
WBOY原創
2022-05-05 15:06:062461瀏覽

在react中,支援ie8的最高版本是「react@0.14」版本,若高於這個版本都是不相容ie8的;可以利用在「index.html」檔案中加入「es5-shim .js」和「es5-sham.js」這兩個檔案的方法使react相容於ie8。

react幾支持ie8

本教學操作環境:windows10系統、ECMAScript 6.0版、Dell G3電腦。

react幾支援ie8

在react的官方公佈的資訊中,它支援 IE8 的最高版本是 react@0.14 版本

如果我們高於這個版本的話就會出現一些問題,而且還不能相容於我們的版本,所以在我們使用的過程中要確認使用的react版本是否有大於react0.14版本,

當然在官方中也給了相容的方法,就是在我們的index.html檔案中加入es5-shim.js和es5-sham.js這兩個檔案就可以了,

而且我們也要確保使用的jQuery 版本是不大於jQuery2.0 的版本,因為在IE8 中不支援jQuery2.0以上的版本。如果你是使用 bootstrap 框架的話我們的 jQuery 的版本最低要用 jQuery1.9 以上的版本。

react是是 Facebook 推出的一個用來建立使用者介面的 JavaScript 函式庫。 React主要用於建立UI,許多人認為 React 是 MVC 中的 V(視圖)。 React 擁有較高的效能,程式碼邏輯非常簡單,越來越多的人開始關注和使用它。

ReactJS是一套JavaScript Web函式庫,由Facebook打造而成且主要用於建構高效能及響應式使用者介面。 React負責解決其它javascript框架所面對的一大常見難題,即對大規模資料集的處理。能夠使用虛擬DOM並在發生變更時利用補丁安裝機制只對DOM中的dirty部分進行重新渲染,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下頁面切換刷新還是比較慢的。

【相關推薦:javascript影片教學web前端

以上是react幾支持ie8的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn