vite 兼容空值运算符[??]到旧的浏览器版本

前言

最近同事测试落地页发现下载触发无响应，然后我为了调试方便，给他手机从酷安上下了一个谷歌浏览器，结果安装完才打开，发现页面直接就报错了，提示：

vue router SyntaxError: Unexpected token '?'

我开始以为是路由出现问题了，结果查了半天发现是es的新特性??语法导致的。

由于vite使用的是esbuild打包，所以我在esbuild的文档上查询到，??语法最低只支持Chrome 80版本，我一看安装的版本v78，两眼一黑。

看来要做一个低版本的兼容处理了。

教程

vite的配置选项中有一个build选项，里面有一个target目标，表示你需要打包后兼容的目标版本，你可以写es的版本，比如：es2020、es2016、es2015；也可以是浏览器版本：chrome87、safari14；

具体我们可以看下官方文档：target

我这里选择简单粗暴：es2015

vite.config.ts

defineConfig({
  build: {
    target: "es2015"
  },
})

此时打包后就可以得到兼容后的代码，再次打开问题解决。