用webpack.ProvidePlugin来解决Photo-Sphere-Viewer旧版本浏览器兼容问题

2023-09-21 16:49:06

polyfill可以解决旧版本兼容问题,旧版本兼容问题原理我觉得也就是把新版功能代码抽离出来放到工程里面来解决旧浏览器没有这些功能。

然而有时候并没有直接的polyfill库,那么我用现有的能解决的库搭配webpack.ProvidePlugin全局变量,来解决不改变第三方没有适配就浏览器的包。

上篇文章已经搭建了最基本的项目,我用手机下载了一个版本62.点开头的chrome apk来测试。


果真白屏,啥也没有,也看不到报错信息。 赶紧安装 vconsole  ,重启,刷新,依然白屏,连vconsole也没有。这可咋弄。

想了下,这浏览器老的是可以呀,还得修改编译参数,加大es5的处理。
根目录有一个配置文件 .browserslistrc 里面的配置如下

> 1%
last 2 versions
not dead

我没仔细研究这意味着能兼容多老的浏览器,我删除了这个文件,再package.json中添加了。(和上面文件是冲突的,必须删除一个)

[
  ]

再编译,再跑。这次刷新有展示了。点开报错。只有一个红色的报错信息 

Script error 

没啥价值。 我添加了try catch 自己打印了console.error(e) 有了详细的报错信息


eventErrorTypeError {}message: "Illegal constructor"stack: "TypeError: Illegal constructor\n at _construct (webpack-internal:///./node_modules/@babel/runtime/helpers/esm/construct.js:30:21)\n at new Wrapper (webpack-internal:///./node_modules/@babel/runtime/helpers/esm/wrapNativeSuper.js:37:71)\n at MyEventTarget._createSuperInternal (webpack-internal:///./node_modules/@babel/runtime/helpers/esm/createSuper.js:24:24)\n at new MyEventTarget (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/App.vue?vue&type=script&lang=js&:55:28)\n at VueComponent.testEventTarget (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/App.vue?vue&type=script&lang=js&:68:29)\n at eval (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/App.vue?vue&type=script&lang


咱也看不懂呀 其实里面有一个有用的信息的 就是  EventTarget  和 constructor。 一开始咱也不知道。


既然源码再收,一步步console下来,终于定位到错误来自  extends EventTarget ,后来就查这个东西,在不知不觉中看到了,

这个语法chrome最低版本支持是64 。 那我就知道为啥低版本浏览器为啥报错了。以为没有这个语法。


于是就开始查vue2 webpack 如何兼容旧版本浏览器,原来使用polyfill,我就各种尝试polyfill,都没有啥效果。引入core-js也不行,后来看了core-js的源码,确实引入了不少polyfill,但是没有eventTarget,并且作者也表明不想加入eventTarget和ResizeObserver库,因为不够主流,不想让他的包增大。实在找不到包来实现polyfill eventTarget, 我现在内部代码修改吧。引入了

event-target-shim

放在使用eventTarget文件中,好通过了。(出现了新的错误,找不到ResizeObserver,哈哈是同样的原因)


不管如何在启动文件引入evet-target-shim这个包都不行,我忽然想到了当然是如何全局引入lodash的,


然后于是添加了下面的代码(虽然就这一句话,可以费劲了千辛万苦呀)


webpack.ProvidePlugin({
  : [] : [] : [] })


这下好了,完美了,太完美了。全景出来了。我用ProvidePlugin实现了旧浏览器的 polyfill功能,真是太开心了。

于是赶紧移植到uniapp工程中,完美呀。

  • 2021-01-24 10:25:00

    iOS中的加号和减号方法

    在OC中,方法分为类方法和实例方法。 前置加号(+)的方法为类方法,这类方法是可以直接用类名来调用的,它的作用主要是创建一个实例。有人把它称为创建实例的工厂方法。 前置减号(-)的方法为实例方法,必须使用类的实例才可以调用的。

  • 2021-02-02 09:42:14

    nuxt.js抽去css文件css代码过多不利于seo

    关于nuxt.js的资料并不是很多,有时候遇到个很简单的问题,百度或者谷歌都不是很容易找到。 其实这个问题就很简单,但是也让我浪费了很多时间,所以在此共勉。

  • 2021-02-03 16:43:11

    Hbase简介

    HBase是一个开源的非关系型分布式数据库,它参考了谷歌的BigTable建模,实现的编程语言为Java。它是Apache软件基金会的Hadoop项目的一部分,运行于HDFS文件系统之上,为 Hadoop 提供类似于BigTable 规模的服务。因此,它可以容错地存储海量稀疏的数据。 作者:Michaelhbjian 链接:https://www.jianshu.com/p/53864dc3f7b4 来源:简书 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 2021-02-03 16:47:05

    use_framework头文件不提示

    1、之前没有用use_frameworks!添加swift库,其他库引用使用#import <xxxx.h> 2、使用use_frameworks!添加swift库后,其他库引用使用#import "xxxx.h"

  • 2021-02-03 16:52:27

    ios静态库和动态库区别

    Framework 是 Cocoa/Cocoa Touch 程序中使用的一种资源打包方式,可以将代码文件、头文件、资源文件(nib/xib、图片、国际化文本)、说明文档等集中在一起,方便开发者使用。Framework 其实是资源打包的方式,和静态库动态库的本质是没有什么关系。

  • 2021-02-03 16:57:34

    iOS中的动态库和静态库分析

    由于最近研究组件化后调试时二进制映射源码的功能,发现需要对开发中的动态库和静态库需要有一些了解。所以就有了这篇文章,由于只是了解,并没有深入到编译层面,所以本篇文章只是简单了解一些库的知识,并不深入。

  • 2021-02-03 16:58:39

    iOS静态库与动态库的区别与打包

    这篇主要是记录一下 iOS 下静态库与动态库的打包流程,以便以后用到时快速查阅,供自己也供大家学习记录。同时也简述了一下 动态库 与 静态库 的区别。