用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工程中,完美呀。

  • 2019-06-03 00:07:32

    Android程序Crash时的异常上报

    家都知道,android应用不可避免的会发生crash,无论你的程序写的多完美,总是无法完全避免crash的发生,可能是由于android系统底层的bug,也可能是由于不充分的机型适配或者是糟糕的网络状况。当crash发生时,系统会kill掉你的程序,表现就是闪退或者程序已停止运行,这对用户来说是很不友好的,也是开发者所不愿意看到的,更糟糕的是,当用户发生了crash,开发者却无法得知程序为何crash,即便你想去解决这个crash,但是由于你无法知道用户当时的crash信息,所以你也无能为力。是否真的这样呢,其实android中有处理这类问题的方法,请看下面Thread类中的一个方法#setDefaultUncaughtExceptionHandler

  • 2019-06-04 16:40:30

    为了美观当网页图片不存在时不显示叉叉图片

    当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带X的图片,很是影响用户的体验。即使使用alt属性给出了”图片XX”的提示信息,也起不了多大作用。

  • 2019-06-04 17:38:44

    PHP时间转换今天昨天前天几天前

    实际情况应该是,昨天任何时间都算一天前,前天任意时间都算2天前,所以自己琢磨了一番,去动态更新时间与今天23:59:59相差的时间秒数与86400(24 x 3600)相除后,向下取整,这样就得到了相差的天数,比如昨天00:00~昨天23:59:59的任何时间与今天的23:59:59,都相差 86400~(86400 x 2) 天,也就是2天。

  • 2019-06-04 17:44:14

    【VUE】图片预览放大缩小插件

    在看项目时,突然看到预览图片的弹窗,感觉好僵硬,不能放大,不能切换,于是便在网上找下关于图片预览的插件,有找到三个插件,具体的优劣势的看自己的使用吧,我目前只是在电脑查看效果,分别是viewerjs插件、基于photoswipe的vue-photo-preview插件以及vue-picture-preview插件 作者:北极星丶超帅的 链接:https://www.jianshu.com/p/e3350aa1b0d0 来源:简书 简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

  • 2019-06-04 21:32:05

    Android 全局Dialog的简单实现

    这里所说的全局Dialog是指无论当前应用是处于哪一个页面上,都能够及时弹出Dialog来提示用户一些信息,用户体验不会很好,一般应用于优先级非常高的通知。