运行npm run dev时Webpack报babel-loader语法错误：Unexpected character '#'

这个错误的根源很清晰——你在WebGLApp类里使用了JavaScript类私有字段语法（就是那些带#前缀的变量，比如#updateListeners、#tmpTarget），但当前你的Babel配置没有启用对这个语法的编译支持，导致babel-loader无法识别该语法，直接抛出了SyntaxError。

具体解决方案 #

你需要给Babel添加对私有字段/方法的支持，有两种常用方式：

方式1：单独安装并启用对应插件

首先安装所需的Babel插件：

npm install --save-dev @babel/plugin-proposal-private-property-in-object @babel/plugin-proposal-private-methods

然后修改你的Babel配置文件（比如项目根目录的.babelrc或babel.config.json），将插件加入配置：

{
  "presets": [
    // 如果你已经在用@babel/preset-env，保留原有配置即可
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-proposal-private-property-in-object",
    "@babel/plugin-proposal-private-methods"
  ]
}

方式2：通过@babel/preset-env启用提案语法（推荐）

如果你使用的是Babel 7.14及以上版本，可以直接在@babel/preset-env里开启shippedProposals选项，自动支持已被浏览器广泛采纳的提案语法，无需单独装插件：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "shippedProposals": true,
        "targets": {
          // 根据你的目标浏览器需求设置，比如支持最近2个版本的主流浏览器
          "chrome": "last 2 versions",
          "firefox": "last 2 versions",
          "safari": "last 2 versions"
        }
      }
    ]
  ]
}

额外检查 #

确保你的Webpack配置里，babel-loader已经正确关联了上述Babel配置，比如：

module.exports = {
  // ...其他Webpack配置
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
};

做完以上配置后，重新执行npm run dev，应该就能正常编译你的私有字段语法了。

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