苹果设备上Static initialization block报错问题求助

静态初始化块是ES2022引入的语法特性，苹果设备上的报错本质是浏览器内核版本不支持该特性：

• Safari 15.4（对应iOS/iPadOS 15.4、macOS Monterey 12.3）是首个正式支持静态初始化块的Safari版本。如果用户设备的系统或Safari版本低于这个门槛，浏览器会把static {}的语法判定为非法，抛出"Unexpected Token '{'"错误。
• 部分Mac上的Chrome出现相同问题，通常是因为这些Chrome版本仍基于旧版WebKit内核（而非现在的Blink内核），或者设备系统版本过低无法运行新版Chrome，导致内核不支持ES2022的静态块语法。

1. 代码转译（最通用的兼容方案） #

用Babel等转译工具将ES2022语法降级为低版本JS可识别的代码。举个实际转换的例子：
原静态块代码：

class AppConfig {
  static settings;
  static {
    this.settings = {
      theme: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
    };
  }
}

转译后等价的兼容代码：

class AppConfig {
  static settings;
}
// 把静态块的逻辑移到类外部执行
AppConfig.settings = {
  theme: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
};

如果有复杂的初始化逻辑（比如条件判断、循环），可以用立即执行函数包裹：

class AppConfig {
  static settings = {};
}
(function initStaticSettings() {
  const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
  AppConfig.settings.theme = isDarkMode ? 'dark' : 'light';
  if (isDarkMode) {
    AppConfig.settings.accent = '#6366f1';
  }
})();

2. 引导用户升级浏览器/系统 #

• 告知苹果设备用户：将Safari升级到15.4及以上版本，对应iOS/iPadOS需升级到15.4+，Mac需升级到Monterey 12.3+。
• Mac上的Chrome用户：确保安装的是最新版本的Chrome（当前Chrome for Mac基于Blink内核，完全支持ES2022特性），若仍有问题，检查设备系统版本是否满足新版Chrome的运行要求。

3. 避免使用静态初始化块（临时应急方案） #

如果无法进行转译或升级，直接放弃静态初始化块语法，把原本放在静态块里的逻辑全部移到类定义之后执行，手动完成静态属性的初始化。这种方式兼容性最高，能覆盖所有旧版浏览器。

内容的提问来源于stack exchange，提问作者Stuart Palmer