用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-02-03 16:57:34

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

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

  • 2021-02-03 16:58:39

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

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

  • 2021-02-03 16:59:59

    iOS 静态库和动态库全分析

    库就是程序代码的集合,将 N 个文件组织起来,是共享程序代码的一种方式。从本质上来说是一种可执行代码的二进制格式,可以被载入内存中执行。

  • 2021-02-03 17:01:30

    iOS库 .a与.framework区别

    静态库:连接时完整地拷贝至可执行文件中,被屡次使用就有多份冗余拷贝。 动态库:连接时不复制,程序运行时由系统动态加载到内存,供程序调用,系统只加载一次,多个程序共用,节省内存。

  • 2021-02-03 17:13:58

    iOS - 封装静态库

    静态库:链接时完整的拷贝至可执行文件中,被多次使用就有多份冗余拷贝,.a的静态库 .framework的静态库

  • 2021-02-03 17:16:07

    iOS 中的动态库、静态库和 framework

    首先来看什么是库,库(Library)说白了就是一段编译好的二进制代码,加上头文件就可以供别人使用。 什么时候我们会用到库呢?一种情况是某些代码需要给别人使用,但是我们不希望别人看到源码,就需要以库的形式进行封装,只暴露出头文件。另外一种情况是,对于某些不会进行大的改动的代码,我们想减少编译的时间,就可以把它打包成库,因为库是已经编译好的二进制了,编译的时候只需要 Link 一下,不会浪费编译时间。

  • 2021-02-03 17:17:53

    iOS 同一个工程下打包不同的app

    应用图标,启动画面,应用启动后的首页都不一样。 有些课程(例如公务员考试和高考)是有目标考试的概念,不同的目标考试大纲是不一样的。拿高考来举例,北京的高考和上海的高考,就有着完全不一样的考试大纲。高考的文科和理科,又有着完全不同的考试科目。 有些课程会有一些自定义的界面,例如高考的应用可以设置昵称,有些课程的真题练习中是有推荐真题模块的,而有些课程又没有。 有些课程有扫描答题卡功能,有些课程有考前冲刺功能,有些课程有大题专项查看功能,而有些课程又没有上述功能。另外还有一些微小细节,但是解决方法和类似,所以就不一一展开说明。

  • 2021-02-04 14:02:30

    window软件界面找不到了跑到屏幕外面去了

    一般可以这样操作,按Alt+空格,然后按M,然后用上下左右键把窗口移动到能看到的地方,再按回车。有些第三方的软件可能不能用,大部分都可以这样做。

  • 2021-02-04 14:08:13

    基于 Electron 的爬虫框架 Nightmare

    Electron 可以让你使用纯 JavaScript 调用 Chrome 丰富的原生的接口来创造桌面应用。你可以把它看作一个专注于桌面应用的 Node.js 的变体,而不是 Web 服务器。其基于浏览器的应用方式可以极方便的做各种响应式的交互,接下来介绍下关于 Electron 上衍生出的框架 Nightmare