React兼容IE8

查找网上的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相关推荐

React 兼容IE8 项目
过去的一年里公司项目需要兼容IE8(主要是一些后台管理系统,所以也无需考虑SEO),技术路线选择了React,但是只能使用 react 0.14 版本来实现.经过了几个多页面项目的摸索,对其中涉及的注 ...
兼容ie8_兼容IE8的一些笔记
最近在做项目,要求兼容主流浏览器之外,还得兼容win7的IE8版本,因为很多客户还是老式win7电脑,甚至还有XP系统的,突然一口老血吐出... 好了,话不多说,上点自己平时踩坑后的一些心得. 一.框 ...
兼容ie8 rgba()用法
滤镜filter的用法在一个页面中设置一个半透明的白色div. [css] view plaincopy background: rgba(255,255,255,.1); 但是ie8不支持rgba ...
让Bootstrap 3兼容IE8浏览器
看到这篇文章有越来越多的人看,我决定给大家节省时间,废话少说.有几个点大家要注意. 1.本地调试需要Web Server(如IIS.Apache,Nginx),单纯地本地打开文件不能看到兼容效果. 2 ...
关于让bootstrap3兼容ie8
官网上有说Internet Explorer 8 和 9 是被支持的,然而,你要知道,很多 CSS3 属性和 HTML5 元素 -- 例如,圆角矩形和投影 -- 是肯定不被支持的.另外, Intern ...
html中两个标签上对齐,css将两个元素水平对齐的方法(兼容IE8)
css实现水平对齐,如图有人会说css实现这种水平对齐要兼容ie8还不简单吗?使用float: left,或者display: inline-block,不就可以了吗?是的,最常用的最简单方式就是上 ...
java websocket ie8_websocket兼容IE8
最近由于项目需要做实时聊天功能,选择了html5的websocket方案(事实上node.js+socket.io兼容性更好,个人觉得这个方案更加完美),websocket实现实时聊天的demo网上很 ...
支持ie8的时分秒的html,兼容ie8的漂亮jQuery计时器插件
C3counter.js是一款兼容ie8的漂亮jQuery计时器插件.该jQuery计时器插件使用图片作为计时器的背景,通过jquery来驱动时间计时动画,整体效果非常漂亮. 使用方法在页面中引入j ...
项目兼容ie8技术要点
好久没有写博客了,因为最近公司项目要调ie8兼容,一直在忙这事,终于竣工了,跟大家分享下这老掉牙的浏览器是如何搞定的...本人新手一枚,欢迎大家指教项目是使用的jeecg框架,后台使用的java,前 ...

React兼容IE8

React兼容IE8相关推荐

最新文章

热门文章