vue-socket.io 引发的浏览器兼容问题

问题

Safari 浏览器打开 Vue Cli 3 开发的网站 app.js 报错

SyntaxError: Unexpected token '>'

查看错误处的源代码，发现存在箭头函数

t => {
  this.$vueSocketIo.emitter.removeListener(t, this)
}

原因

箭头函数是 ES6 才支持的语法，稍老的浏览器并不支持，同时根据关键字 $vueSocketIo，得知这是 vue-socket.io 模块

解决方法

1. 找到非 ES6 语法的 vue-socket.io 依赖库版本
2. 想办法让 babel 把它翻译成兼容版本

方法 1 （放弃）

最后发现一个扩展库 vue-socket.io-extended，但是这个版本的接口停留在 2.X，与我们现在使用的 3.0.5 不兼容，替换后功能无法正常使用了

方法 2 （成功）

vue cli 的 babel 默认只翻译 src 目录下的程序代码，如果向翻译 node_modules 里的，可以通过 transpileDependencies 参数手动配置

然后在 vue.config.js 里添加配置

transpileDependencies: ['vue-socket.io'],

重启后，控制台出现警告

"export 'default' (imported as 'VueSocketIO') was not found in 'vue-socket.io'

同时所有浏览器都无法打开网页了，出现报错

Uncaught TypeError: vue_socket_io__WEBPACK_IMPORTED_MODULE_12__.default is not a constructor

在网上找的解决方案，还需要在 babel.config.js 配置 useBuiltIns

module.exports = {
  presets: [
    [
      '@vue/app',
      {
        useBuiltIns: 'entry'
      }
    ]
  ]
}

最终完美解决了兼容问题！！！

注意事项

配置是双层嵌套 [[...]]，否则会出现报错

Unknown option: .useBuiltIns`