JavaScript公共类字段解析报错：Unexpected token = 问题排查

我在导入自定义类文件（路径为vendor/test）时遇到语法解析错误：error Parsing error: Unexpected token =。我的需求是修改一个无人维护的第三方库，然后在自身代码库中使用它。根据JS规范，field = '123'这种公共类字段写法是合法的，但为什么会触发这个错误？

导入代码 #

import {Test} from '../../../vendor/test';

被导入的test.js代码 #

export class Test {
    field = '123';
    constructor(a) {
        this.a = a;
        console.log('creating test');
    }
}

export default Test;

核心原因 #

问题出在你的代码解析/转译环境不支持公共类字段语法。虽然该特性已纳入ES标准，但它属于较新的语法，旧版构建工具（如旧版ESLint、Babel）或运行环境默认不会开启对它的支持。

排查与解决方向 #

• ESLint配置问题：若报错来自ESLint，检查配置文件（.eslintrc等），确保parserOptions.ecmaVersion设置为2022及以上；或安装@babel/eslint-parser并配置它来兼容最新语法。
• Babel转译问题：使用Babel构建时，需安装@babel/plugin-proposal-class-properties插件并在配置中启用；新版Babel（7.12+）可直接用@babel/preset-env并设置targets，它会自动加载必要插件。
• 运行环境版本过低：Node.js从v16.13.0开始默认支持公共类字段，浏览器需Chrome 74+、Firefox 69+等版本。若目标环境版本不足，必须通过转译工具处理代码。
• 文件扩展名问题：部分项目对.js文件使用旧版解析规则，尝试改为.mjs扩展名（需配合项目模块系统配置）。

内容的提问来源于stack exchange，提问作者Dan Tang