V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
sunny1688
V2EX  ›  问与答

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

  •  
  •   sunny1688 · 2022-10-20 14:44:15 +08:00 · 1818 次点击
    这是一个创建于 769 天前的主题,其中的信息可能已经有所发展或是发生改变。

    先说问题,在 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
    

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

    15 条回复    2022-10-20 16:28:20 +08:00
    hua123s
        1
    hua123s  
       2022-10-20 14:57:48 +08:00
    这是什么奇怪的写法
    export default new (class Helpers {
    public list: string[] = []; // 主要是这行导致的
    })();
    这个意思?
    MrYELiex
        2
    MrYELiex  
       2022-10-20 14:59:18 +08:00
    报错都这么明显了 还想浏览器帮你改好吗
    sunny1688
        3
    sunny1688  
    OP
       2022-10-20 15:00:15 +08:00
    ts 翻译成 js 后其实就是

    class Helpers {
    list = []; // safari 不支持这样的写法
    }
    happyeveryday
        4
    happyeveryday  
       2022-10-20 15:05:03 +08:00
    vitejs 我们只打 dev 模式本地开发,确实速度提升巨大
    测试预发生产环境都是 webpack 打,稳稳地
    Rache1
        5
    Rache1  
       2022-10-20 15:07:31 +08:00
    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
        6
    hua123s  
       2022-10-20 15:08:26 +08:00
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields
    Safari 14.1 才支持 public class field ,编译成 ES5 咯。
    hua123s
        7
    hua123s  
       2022-10-20 15:09:04 +08:00
    lenonrade
        8
    lenonrade  
       2022-10-20 15:09:46 +08:00
    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
        9
    sunny1688  
    OP
       2022-10-20 15:29:35 +08:00
    @hua123s @lenonrade @Rache1

    发现只有在开发期间的时候报错,一样的代码,npm run build 后可以运行
    sunny1688
        10
    sunny1688  
    OP
       2022-10-20 15:31:58 +08:00
    开发期间看到浏览器是直接请求 /xxx/xxx.ts ,而不是编译后的 js
    wunonglin
        11
    wunonglin  
       2022-10-20 15:43:26 +08:00
    谁说 safari 不支持 class ?

    https://imgur.com/OwmctqL
    sunny1688
        12
    sunny1688  
    OP
       2022-10-20 16:07:06 +08:00
    @wunonglin 你的 safari 哪个版本?
    wunonglin
        13
    wunonglin  
       2022-10-20 16:09:04 +08:00
    @sunny1688 #12

    Version 16.0 (17614.1.25.9.10, 17614)
    hua123s
        14
    hua123s  
       2022-10-20 16:12:00 +08:00
    @sunny1688 如果只是这一个 public class field 问题,可以修改 tsconfig => compilerOptions => useDefineForClassFields: false 来解决。
    sunny1688
        15
    sunny1688  
    OP
       2022-10-20 16:28:20 +08:00
    @hua123s 感谢,按照你的方法可以正常运行了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5892 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 01:50 · PVG 09:50 · LAX 17:50 · JFK 20:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.