用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-09-11 15:28:07

    Node 性能优化

    硬盘的 IO 开销是非常昂贵的,硬盘 IO 花费的 CPU 时钟周期是内存的 41000000/250 = 164000 倍。 所有在一般应用中,优化要首先考虑数磁盘 IO , 通常也就是数据层的优化,说到数据库优化,很多人第一时间会想到加索引,但是什么加了索引查询会变快呢?索引要怎么加才合适呢?

  • 2019-09-11 16:49:56

    flex布局详解,Flex 布局语法教程

    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现

  • 2019-09-12 16:32:19

    JSLint,JSHint,ESLint的区别

    主流的JS Lint工具及介绍 JavaScript已经发展蛮长时间了,对应的Lint工具也是层出不穷,下面介绍一下比较主流的几个Lint工具(其实是我用过的几个XD)

  • 2019-09-16 22:56:52

    java.lang.NoSuchMethodError:SpringJAR包版本冲突错误解决方法

    查询了相关资料,大部分都说引起的原因是JAR包错误或JAR包冲突,查看了配置文件,并没有发现错误之处,因为用的是maven工程,这让我想到了maven的JAR引用的传递性,应该是引用的JAR包中传递引用了相同的包,没有排除。通过mvn dependency:tree 命令查看当前工程引用的依赖JAR树

  • 2019-09-17 17:19:42

    strapi 先进的 headless cms

    为什么叫cms而不是框架,主要是因为他提供了一个程序员操作面板,看起来像是一个综合的后台管理,很容易误解具体项目的后台管理,他更像是一个数据库管理面板顺便完成api的自动开发操作。

  • 2019-09-17 17:20:59

    Headless CMS 的介绍

    在本文中,我们将了解Headless CMS,我们将了解它的优点以及何时使用方便。此外,我们将列举实际的主要限制。为了更好地理解HCMS如何在幕后工作,我将解释如何设计和构建RawCMS,一个带有Oauth2的Aspnet.Core Headless CMS,扩展插件系统,业务逻辑支持。该解决方案可在GitHub上获得,并作为演示版在docker hub上发布。

  • 2019-09-17 17:21:58

    Headless CMS 详细介绍

    什么是 Headless CMS? 为什么 Headless CMS 带有真正的革命性?因为它严格的将内容和格式分离,使我们回归到内容管理的本源。这种变化必然会带来一些不确定性。因此,在开始您的第一个 CMS 项目之前,了解 Headless CMS 概念至关重要。因为它和传统的 CMS 有着本质的区别。