vite chrome78 兼容 可选链失败

Question

vue3.x vite4.0.0 在 chrome78 兼容 可选链失败

具体问题

在使用 vite 创建vue项目时，兼容chrome78可选链支持失败。
计划使用 plugin-legacy 和 terser 插件兼容性（支持失败）

核心代码

package.json

  "dependencies": {
    "pinia": "^2.0.28",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@vitejs/plugin-legacy": "^3.0.1",
    "@vitejs/plugin-vue": "^4.0.0",
    "prettier": "^2.7.1",
    "terser": "^5.16.1",
    "vite": "^4.0.0"
  }

vite.config.js

plugins: [
      vue(),
      legacy({
        targets: ["chrome > 78"],
        renderLegacyChunks: true,
        additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
        polyfills: [
          "es.symbol",
          "es.array.filter",
          "es.promise",
          "es.promise.finally",
          "es/map",
          "es/set",
          "es.array.for-each",
          "es.object.define-properties",
          "es.object.define-property",
          "es.object.get-own-property-descriptor",
          "es.object.get-own-property-descriptors",
          "es.object.keys",
          "es.object.to-string",
          "web.dom-collections.for-each",
          "esnext.global-this",
          "esnext.string.match-all",
        ],
      }),
    ],
    build: {
      target: "es2015",
    },

错误场景

运行代码

const obj = {}
console.log(obj?.a ?? "not deifend")

控制台报错：浏览器内核 chrome78
Uncaught SyntaxError: Unexpected token '.'

自己初步定位问题

可选链支持失败

Answer 1

在使用Vite开发Vue项目时，兼容Chrome78可选链支持失败是由于Chrome78不支持这种语法。您可以使用一些工具来解决这个问题。

使用Babel，安装@babel/plugin-proposal-optional-chaining插件。

使用eslint，安装eslint-plugin-optional-chaining插件。

使用polyfill，在代码中引入@babel/polyfill或core-js。

综上所述，使用@vitejs/plugin-legacy和terser插件兼容性是不能实现的。建议您使用上述工具来解决这个问题。