H5解决可选链在安卓webview chrome 69不起作用的问题

版本信息

"dependencies": {
   "@varlet/touch-emulator": "^2.13.4",
   "@varlet/ui": "^2.14.2",
   "hammerjs": "^2.0.8",
   "vue": "^3.2.47"
},
"devDependencies": {
   "@rushstack/eslint-patch": "^1.2.0",
   "@tsconfig/node18": "^2.0.0",
   "@types/hammerjs": "^2.0.41",
   "@types/node": "^18.16.3",
   "@vitejs/plugin-vue": "^4.2.1",
   "@vitejs/plugin-vue-jsx": "^3.0.1",
   "@vue/eslint-config-prettier": "^7.1.0",
   "@vue/eslint-config-typescript": "^11.0.3",
   "@vue/tsconfig": "^0.3.2",
   "eslint": "^8.39.0",
   "eslint-plugin-vue": "^9.11.0",
   "npm-run-all": "^4.1.5",
   "prettier": "^2.8.8",
   "typescript": "~5.0.4",
   "vite": "^4.3.4",
   "vue-tsc": "^1.6.4"
}

问题

本地运行或者打包之后的代码在chrome 69版本不起作用

解决方案

globalThis

这个可以在 index.html 添加

<script> 
  this.globalThis || (this.globalThis = this) 
</script>

加完之后，那个报错就没有了

可选链

这个需要安装插件

npm i @babel/plugin-proposal-optional-chaining --save-dev
 
npm i @babel/plugin-proposal-nullish-coalescing-operator --save-dev

npm i rollup-plugin-esbuild --save-dev

修改 vite.config.ts 文件

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import esbuild from 'rollup-plugin-esbuild'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    {
      ...esbuild({
        target: 'chrome70',
        include: /\.vue|.ts|.js$/,
        loaders: {
          '.vue': 'js'
        }
      }),
      enforce: 'post'
    }
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

重新运行下就没有报错了，页面正常显示！🎉

结尾

本文章提供的方案不一定是最佳方案，如有更好的方案，欢迎留言讨论。

参考文章

vite 链式操作符 ?. 在低版本浏览器不兼容问题 - Cynthia娆墨旧染 - 博客园 (cnblogs.com)

chrome下载链接

Chromium History Versions Download ↓ (vikyd.github.io)