Terser项目解析类属性时遇到"Unexpected token"错误的分析与修复

在JavaScript的类定义中，开发者经常会使用类属性声明来简化代码。然而，Terser项目在5.36.0版本中处理某些特定格式的类属性声明时会出现解析错误。

问题现象

当代码中出现以下形式的类定义时，Terser会抛出"Unexpected token: punc ([)"的错误：

new class {
  a
  ["b"]
}

这段代码在原生JavaScript环境中是完全合法的，它定义了一个匿名类并创建其实例，该类包含两个属性：a和b。但在Terser的压缩过程中却无法正确解析。

问题根源

经过分析，这个问题的根本原因在于Terser的解析器在处理类属性声明时，对特定语法结构的识别不够完善。具体来说：

1. 当类中包含多个属性声明时
2. 其中包含计算属性名（使用方括号[]的语法）
3. 且计算属性名前面没有分号分隔

这种情况下，解析器会错误地将计算属性名的左方括号[识别为非法标点符号，而不是合法的属性名开始标记。

技术背景

在ECMAScript规范中，类字段声明有两种主要形式：

1. 标识符名称：直接使用标识符作为属性名

   class Example {
     prop
   }
   

2. 计算属性名：使用方括号包裹的表达式作为属性名

   class Example {
     ["prop"]
   }
   

这两种形式可以自由组合使用，且不需要显式分号分隔。现代JavaScript引擎都能正确解析这种语法。

临时解决方案

在Terser修复此问题前，开发者可以采用以下临时解决方案：

1. 添加显式分号：

   new class {
     a;
     ["b"]
   }
   

2. 初始化属性值为undefined：

   new class {
     a = undefined;
     ["b"] = undefined
   }
   

修复情况

Terser团队已经确认这是一个解析器bug，并在后续版本中修复了这个问题。修复后的版本能够正确处理以下所有形式的类属性声明：

// 简单标识符属性
class A {
  a
}

// 计算属性名
class B {
  ["b"]
}

// 变量作为属性名
class C {
  [MyVar]
}

// 混合使用
class D {
  a
  ["b"]
  [MyVar]
}

对开发者的建议

1. 遇到类似解析错误时，首先确认代码在原生环境中的运行情况
2. 保持Terser版本更新，以获取最新的bug修复
3. 在复杂类定义中适当使用分号可以增强代码的可读性和工具兼容性
4. 当使用计算属性名时，考虑添加显式初始化以避免潜在的工具链问题

这个案例展示了JavaScript工具链在处理新兴语法时可能遇到的挑战，也提醒开发者在选择构建工具时需要考虑其对最新语言特性的支持程度。