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

 更新时间:2019-03-15 03:00:41   作者:佚名   我要评论(0)

最近接手一个React项目,在IE下碰到了俩问题
IE11报错如下:



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

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

IE11报错如下:

跟踪一下之后,发现是一些其他的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又出问题了。。。

犯了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
}

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

相关文章

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

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

    最近接手一个React项目,在IE下碰到了俩问题 IE11报错如下: 跟踪一下之后,发现是一些其他的npm包里面用到了startsWith这个方法,可以自己polyfill一下:
    2019-03-15
  • Spring Cloud Alibaba Nacos 入门详解

    Spring Cloud Alibaba Nacos 入门详解

    概览 阿里巴巴在2018年7月份发布Nacos, Nacos是一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台。并表示在6-8个月完成到生产可用的0.8版本,
    2019-03-15
  • Spring Boot设置并使用缓存的步骤

    Spring Boot设置并使用缓存的步骤

    几个缓存注解的作用: @Cacheable:将方法的返回结果根据key指定的键保存在缓存中,以后要获取相同的数据直接从缓存中共获取 cacheNames/value:指定Cache
    2019-03-15
  • springboot后端解决跨域问题

    springboot后端解决跨域问题

    首先我门要知道什么是跨域: 跨域是指 不同域名之间相互访问。跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScr
    2019-03-15
  • 浅谈PHP无限极分类原理

    浅谈PHP无限极分类原理

    1.递归:程序调用自身的编程技巧称为递归 2.案例: /** * @param 递归 $[name] */ function deeploop(&$i=1){ echo $i; $i++; if($i < 10){
    2019-03-15
  • PHP的简单跳转提示的实现详解

    PHP的简单跳转提示的实现详解

    在PHP开发中,尤其是MVC框架或者项目中,会碰到很多跳转情况,比如:登录成功或失败后的跳转等等。 以下以MVC框架开发中为基础,示例讲解: 在基础控制器类中
    2019-03-15
  • PHP封装的数据库模型Model类完整示例【基于PDO】

    PHP封装的数据库模型Model类完整示例【基于PDO】

    本文实例讲述了PHP封装的数据库模型Model类。分享给大家供大家参考,具体如下: <&#63;php //引入配置文件 include "../Config/config.php"; c
    2019-03-15
  • Spring AOP手动实现简单动态代理的代码

    Spring AOP手动实现简单动态代理的代码

    什么是AOP我们先来看一张图 图中A就是通知,比如你要给每个方法前都加一个before()方法,目标类的每一个方法叫joinpoint(切入点),每个切入点都会用到通知
    2019-03-15
  • 详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现

    详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现

    一、实践踩坑 项目使用mpvue开发 1. scroll-view默认是不滚动的。。所以要先设置scroll-x="true"或者scroll-y="true" 2. 在scroll-view里面添加定宽元素,超
    2019-03-15
  • 浅谈Java中replace与replaceAll区别

    浅谈Java中replace与replaceAll区别

    看门见山 1.java中replace API: replace(char oldChar, char newChar):寓意为:返回一个新的字符串,它是通过用 newChar 替换此字符串中出现的所有 oldChar
    2019-03-15

最新评论