详解React项目中碰到的IE问题


Posted in Javascript onMarch 14, 2019

最近接手一个React项目,在IE下碰到了俩问题

IE11报错如下:

详解React项目中碰到的IE问题

跟踪一下之后,发现是一些其他的npm包里面用到了startsWith这个方法,可以自己polyfill一下:

if (!String.prototype.startsWith) {
 String.prototype.startsWith = function (search, pos) {
 return this.substr(!pos || pos < 0 ? 0 : +pos, search.length) === search
 }
}

不过加prototype的方法毕竟不好,可以通过引入@babel/polyfill解决,在入口文件中引入import '@babel/polyfill';

IE11问题解决后,IE10又出问题了。。。

详解React项目中碰到的IE问题

犯了stackoverflow和github的很多帖子之后,在这个帖子里找到,发现是Object.setPrototypeOf的问题,Object.setPrototypeOf说是支持了IE9-11, 实际在源码里只实现了11+(https://github.com/paulmillr/es6-shim/blame/master/README.md#L78)

解决办法可以是在polyfill url后加上excludes=Object.setPrototypeOf, 或者自己实现Object.setPrototypeOf方法,我这里引入了一个库setprototypeof,然后在入口文件中加上Object.setPrototypeOf = require('setprototypeof');

其实这个库里的实现代码非常少, 可以简单看下

'use strict'
/* eslint no-proto: 0 */
module.exports = Object.setPrototypeOf || ({ __proto__: [] } instanceof Array ? setProtoOf : mixinProperties)

function setProtoOf (obj, proto) {
 obj.__proto__ = proto
 return obj
}

function mixinProperties (obj, proto) {
 for (var prop in proto) {
 if (!obj.hasOwnProperty(prop)) {
  obj[prop] = proto[prop]
 }
 }
 return obj
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
浅谈vue-router2路由参数注意的问题
Nov 08 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
微信小程序之多文件下载的简单封装示例
Jan 29 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 Javascript
vue 动态表单开发方法案例详解
Dec 02 Javascript
夯基础之手撕javascript继承详解
Nov 09 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 #Javascript
React+Antd+Redux实现待办事件的方法
Mar 14 #Javascript
Node.js + express基本用法教程
Mar 14 #Javascript
Vue渲染过程浅析
Mar 14 #Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 #Javascript
详解使用React制作一个模态框
Mar 14 #Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 #Javascript
You might like
PHP 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
PHP实现递归的三种方法
2020/07/04 PHP
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
vue模式history下在iis中配置流程
2019/04/17 Javascript
vue实现数据控制视图的原理解析
2020/01/07 Javascript
Python 面向对象 成员的访问约束
2008/12/23 Python
Tesserocr库的正确安装方式
2018/10/19 Python
Python实现将通信达.day文件读取为DataFrame
2018/12/22 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
python生成大写32位uuid代码
2020/03/03 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
传播学毕业生求职信
2013/10/11 职场文书
银行职业规划书范文
2013/12/28 职场文书
办公室主任主任岗位责任制
2014/02/11 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
党员个人总结自评
2015/02/14 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书
字节飞书面试promise.all实现示例
2022/06/16 Javascript
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers