类中静态Map属性触发Babylon语法错误的原生JS解决方案

问题背景 #

这段代码在浏览器中可正常运行，但采用ESM标准时，依赖Babylon的Nightwatch会抛出语法错误：

class Foo {
    static dictionary = new Map();
}

报错信息 #

✖ SyntaxError
mylib.js: Unexpected token

堆栈追踪 #

Stack Trace :
    at Parser.pp$5.raise (path/node_modules/babylon/lib/index.js:4454:13)
    at Parser.pp.unexpected (path/node_modules/babylon/lib/index.js:1761:8)
    at Parser.pp$1.parseClassProperty (path/node_modules/babylon/lib/index.js:2571:50)
    at Parser.pp$1.parseClassBody (path/node_modules/babylon/lib/index.js:2516:34)

环境配置（package.json） #

"type": "module",
"scripts": {
  "test:safari": "nightwatch --env default",
},
"babel": {
  "presets": ["es2015"],
  "plugins": ["add-module-exports"]
},
"devDependencies": {
  "@rollup/plugin-terser": "^0.4.4",
  "babel-core": "^6.26.3",
  "babel-plugin-add-module-exports": "^1.0.4",
  "babel-preset-es2015": "^6.24.1",
  "chai": "^4.2.0",
  "chromedriver": "^119.0.1",
  "dotenv": "^16.0.3",
  "edgedriver": "^5.3.8",
  "geckodriver": "^4.2.1",
  "jsdoc": "^3.6.5",
  "minami": "^1.2.3",
  "mocha": "10.1.0",
  "nightwatch": "^3.3.2",
  "rollup": "^4.6.1"
}

已尝试的方案 #

尝试用立即执行函数表达式定义静态属性，但仍然报错：

static dictionary = (() => {
    const map = new Map();
    return map;
})();

解决方案 #

你使用的Babylon版本（依赖babel-core 6.x）不支持类字段声明语法（包括静态类字段）——这是ES2022才纳入标准的特性，而babel-preset-es2015仅支持到ES6（ES2015）。以下是两种纯原生JS替代方案：

方案1：类外部定义静态属性 #

这是ES6原生支持的写法，直接在类声明后为类添加静态属性：

class Foo {
    // 类内部其他逻辑
}

// 外部挂载静态属性
Foo.dictionary = new Map();

方案2：静态getter实现延迟初始化 #

如果需要延迟初始化静态属性（首次访问时才创建），可以用ES6支持的静态getter方法，配合私有变量实现只初始化一次：

class Foo {
    static get dictionary() {
        if (!this._dictionary) {
            this._dictionary = new Map();
        }
        return this._dictionary;
    }
}

// 使用方式与原代码一致：Foo.dictionary

如果希望通过Babel支持类字段语法，可以升级Babel到7.x，安装@babel/preset-env并添加@babel/plugin-proposal-class-properties插件，但上述两种方案无需依赖编译工具，纯原生即可解决问题。

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