求助， safari 上运行报错的前端问题

[sunny1688]

先说问题，在 chrome 、firefox 上完美运行，但在 safari 上运行报错：SyntaxError: Unexpected token '='. Expected an opening '(' before a method's parameter list.

safari 版本：13.x

# src/utils/helper.ts

export default new class Helpers {
    public list: string[] = [];			// 主要是这行导致的
}

npm create vite@latest safari-demo --template vue-ts
cd safari-demo
npm install
npm run dev

是什么原因导致的啊？是需要安装什么插件吗？有遇到相同问题的吗？

[hua123s]

这是什么奇怪的写法
export default new (class Helpers {
public list: string[] = []; // 主要是这行导致的
})();
这个意思？

[MrYELiex]

报错都这么明显了 还想浏览器帮你改好吗

[sunny1688]

ts 翻译成 js 后其实就是

class Helpers {
list = []; // safari 不支持这样的写法
}

[happyeveryday]

vitejs 我们只打 dev 模式本地开发，确实速度提升巨大
测试预发生产环境都是 webpack 打，稳稳地

[Rache1]

Safari 的版本太低了，还不支持这个语法，可以用 babel 处理一下

javascript - SAFARI : Unexpected token '='. Expected an opening '(' before a method's parameter list - Stack Overflow
https://stackoverflow.com/questions/60026651/safari-unexpected-token-expected-an-opening-before-a-methods-paramet

[hua123s]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields
Safari 14.1 才支持 public class field ，编译成 ES5 咯。

[hua123s]

https://github.com/vitejs/vite/tree/main/packages/plugin-legacy 用这个

[lenonrade]

safari 不支持 ES6 的 Class static initialization blocks, ES6 的类归根到底还是 JavaScript 的原型继承，不要忘了 javascript 的本质.
参考文献：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Class_static_initialization_blocks

[sunny1688]

@hua123s @lenonrade @Rache1

发现只有在开发期间的时候报错，一样的代码，npm run build 后可以运行

[sunny1688]

开发期间看到浏览器是直接请求 /xxx/xxx.ts ，而不是编译后的 js

[wunonglin]

谁说 safari 不支持 class ？

https://imgur.com/OwmctqL

[sunny1688]

@wunonglin 你的 safari 哪个版本？

[wunonglin]

@sunny1688 #12

Version 16.0 (17614.1.25.9.10, 17614)

[hua123s]

@sunny1688 如果只是这一个 public class field 问题，可以修改 tsconfig => compilerOptions => useDefineForClassFields: false 来解决。

[sunny1688]

@hua123s 感谢，按照你的方法可以正常运行了