我再uniapp上使用的photo-sphere-viewer全景组件再旧版本浏览器(chrome 64版本之下)上不能正常展示,报错_constructor的问题,怎么适配也适配不好,改组件的作者说由于他一来的three.js不支持es5了,所以他也不支持,由于这个库并不是采用我们熟悉的webpack编译的,所以我就准备搭建一个简单的工程,专门跑起来photo-sphere-viewer来寻找错误原因或者看能修改掉吗。
下面我分三步讲一讲我如何大家这个vue2的typescript(因为这个项目本身就是使用的typescript开发)工程的。
1.首先使用vue-cli搭建一个纯洁的vue2库。(参考地址 手动搭建vue2项目工程环境[20211221]最新)
1. npm install -g @vue/cli
2.vue create vue-cli
3.根据提示选择手动安装 Manually select features
4. 我的配置列表如下
? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, TS ? Choose a version of Vue.js that you want to start the project with 2.x ? Use class-style component syntax? Yes ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? (y/N) y
5.好 一切结束,我们能跑起来一个没有错误纯洁的vue2工程了
2. 导入Photo-Sphere-Viewer-main 核心包,这是一个最简单能跑起来全景图的配置。
1.从github下载master包,复制出packages文件夹下面的core包到自己的vue2工程下
2.此时typescript的检测开始生效了,报出了很多错误,我想不设置不检测typescript的错误,没找到怎么解决。
那就一个一个的解决吧。
3.先不去看错误,把Photo-Sphere-Viewer-main根目录中的package里面的依赖包括core包中的依赖,粘贴到我们
工程的根目录下面。安装。
4. 把core目录下面tscofnig.json的include 和excude 配置复制到我们的工程的tsconfig下面,并删除core根目录中所以没必要的配置文件,但是我不知道子目录的tsconfig和跟目录的tsconfig.json有多少关联,也没有考证。
5.复制shared文件夹以及typings.d.ts文件到我们的工程,这一步解决了.svg typescript检测报错的问题。
6.删除我们自己tsconfig.json中的 types:[webpack-env]这个配置,不知道为啥默认给这个,给了这个就不能使用node_modules/@type目录下的type声明了。这个能解决好多报错。
7.重新运行 开始解决其他typescript的报错。
8. 错误1号:
TS2322: Type 'null' is not assignable to type 'AdapterConstructor & typeof AbstractAdapter'. Type 'null' is not assignable to type 'AdapterConstructor'.
这个 需要再tscofnig.json配置文件中添加
"strictNullChecks": false,
就好了
9.
ERROR in src/self_modules/core/src/adapters/interpolationWorker.ts:12:28 TS2304: Cannot find name 'OffscreenCanvas'.
我是先在Photo-Sphere-Viewer-main中成功跑成功后,点击他里面的文件发现这个OffscreenCavas是在typescript自己的包中,我的同样的文件并没有这个属性,检查是要升级typescript到 5版本之上。
到这里typescript的报错提示解决完毕。
3.在APP.vue中开始写简单的全景代码
1.出现错误 提示要安装 sass-loader,直接安装就好了。
2.
4 │ @import '../../../shared/vars'; 找不到这个,直接去原仓库找到复制过来就好了。
3.
Cannot read properties of null (reading 'classList') TypeError: Cannot read properties of null (reading 'classList') at addClasses (webpack-internal:///./src/self_modules/core/src/utils/browser.ts:44:11) at ZoomOutButton.__setIcon (webpack-internal:///./src/self_modules/core/src/buttons/AbstractButton.ts:180:55) at new AbstractButton (webpack-internal:///./src/self_modules/core/src/buttons/AbstractButton.ts:61:12) at new AbstractZoomButton (webpack-internal:///./src/self_modules/core/src/buttons/AbstractZoomButton.ts:25:5) at new ZoomOutButton (webpack-internal:///./src/self_modules/core/src/buttons/ZoomOutButton.ts:13:5) at eval (webpack-internal:///./src/self_modules/core/src/components/Navbar.ts:151:11) at Array.forEach (<anonymous>) at eval (webpack-internal:///./src/self_modules/core/src/components/Navbar.ts:149:34) at Array.forEach (<anonymous>) at Navbar.setButtons (webpack-internal:///./src/self_modules/core/src/components/Navbar.ts:142:13)
这个报错,没找到怎么解决,看源码,再一步步走,应该是设置菜单按钮的地方。
再view初始化的方法里面注释掉了设置button的代码就好了,
// init buttons if (this.config.navbar) { // this.navbar.setButtons(this.config.navbar); }
虽然咱这个是不带样式的全景,只是能展示不报错而已。咱的目的是解决旧浏览器的兼容问题。
好了。所有都准备完毕了,下面开始结局兼容问题。写在下篇文章了哈。