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

  • 2020-01-04 08:19:28

    flex 布局子内容p元素被撑开

    父元素 flex 布局,子元素有一行文字,将其设置为不换行隐藏后显示省略号,但实际并不是想象的那样,而导致布局变形。改怎么办?

  • 2020-01-04 18:44:26

    vue中computed源码,工作原理

    (Obeject.defineProperty是Object的一个方法,第一个参数是对象名称,第二个参数是要设置的属性名,第三个参数是一个对象,它可以设置这个属性是否可修改、可写等,而这篇文章主要使用的是Obeject.defineProperty的访问器属性,感兴趣的朋友可以自行google或者查看Js高及程序设计)

  • 2020-01-06 23:02:42

    Updating Homebrew... 更新了镜像依然卡死

    使用brew install [软件包]安装软件包时,卡在Updating Homebrew... 或输入`brew update`更新brew,半天没反应.产生原因一般是在国内访问官方 更新源获取资源太慢,解决方案可以采用更换国内镜像更新源.

  • 2020-01-07 10:06:00

    vue重定向beforeRouterEnter与replace的使用

    一个登录页面,只有第一次才会出现,一旦出现过,以后再也不会出现,即使是输入该页面的url也不会跳转到该页面,只会跳转到指定的其他页面;

  • 2020-01-07 10:14:07

    vue强制刷新组件 销毁和重建

    很多时候,通过重置数据将页面重置时,子组件可以提供重置的方法,或者提供props重置自己的状态。但是相对麻烦,那可以使用强制刷新来实现刷新组件。

  • 2020-01-07 10:17:42

    vue钩子函数beforeRouteUpdate没有反应

    由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 可以访问组件实例 `this`