使用webpack的babel-loader无法加载stage-3 JavaScript文件求助

这个错误的核心原因是你使用了类字段声明语法（authenticated = this.isAuthenticated()这种类顶层属性赋值的写法），这一特性曾经处于ES提案的stage-3阶段，现在已经纳入ES2022标准，但你的Webpack/Babel配置默认没有启用对该语法的支持，导致解析器无法识别这个语法结构。

下面提供几种可行的解决办法：

方法1：改用传统构造函数写法（无需修改配置） #

如果不想调整Babel配置，可以把类字段的定义移到构造函数里，这是ES6标准原生支持的写法：

export default class AuthService {
  constructor() {
    this.authenticated = this.isAuthenticated();
    this.authNotifier = new EventEmitter();
  }

  // 你的其他类方法...
}

方法2：配置Babel支持类字段语法 #

如果想保留类字段的简洁写法，需要给Babel添加对应的插件或配置：

步骤1：安装必要的Babel插件 #

打开终端，根据你的包管理器选择命令安装插件：

# 使用npm
npm install --save-dev @babel/plugin-proposal-class-properties

# 使用yarn
yarn add --dev @babel/plugin-proposal-class-properties

步骤2：修改Babel配置文件 #

在项目根目录的.babelrc或babel.config.json文件中，将插件添加到配置列表：

{
  "presets": [
    // 保留你已有的预设，比如@babel/preset-react、@babel/preset-env
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

方法3：升级Babel并启用ES2022支持（适用于Babel 7.12+） #

如果你使用的是Babel 7.12及以上版本，可以直接通过@babel/preset-env配置目标环境，让它自动兼容ES2022特性：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "chrome": "90",
        "firefox": "88",
        "ie": "11" // 若需兼容IE可保留，否则可删除
      },
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ]
}

Babel会根据你设置的目标浏览器，自动转译包括类字段在内的ES2022特性到兼容语法。

完成配置后，重启Webpack开发服务器，这个解析错误应该就能解决了。

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