使用Webpack+Babel+Terser打包时构造函数出现未捕获错误

用原生JavaScript开发Web SDK，通过Webpack、Babel和Terser压缩打包生成bundle.js，但HTML页面加载时触发未捕获错误。更换依赖包后问题依旧，错误指向const geolocationAdapter = new GeolocationAdapter();，已添加devtool: 'source-map'并移除optimization配置，仍无法定位具体原因，以下是相关代码片段：

核心代码文件 #

SDKContract.js #

class SDKContract {
    constructor() {}

    getLocation(callback) {
        throw new Error("getLocation method not implemented");
    }
}

GeolocationAdapter.js #

class GeolocationAdapter extends SDKContract {
    getLocation(callback) {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                const location = {
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude
                };
                callback(location);
            }, function (error) {
                callback({
                    error: "Location access denied or unavailable."
                });
            });
        } else {
            callback({
                error: "Geolocation not supported by this browser."
            });
        }
    }
}

LocationWrapper.js #

class LocationWrapper extends SDKContract {
    constructor(adapter) {
        super();
        this.adapter = adapter;
    }

    getLocation(callback) {
        this.adapter.getLocation(callback);
    }
}

main.js #

import GeolocationAdapter from './src/GeolocationAdapter';
import LocationWrapper from './src/LocationWrapper';

const geolocationAdapter = new GeolocationAdapter();
const locationWrapper = new LocationWrapper(geolocationAdapter);

document.getElementById("getLocationButton").addEventListener("click", function () {
    locationWrapper.getLocation(function (location) {
        if (location.error) {
            document.getElementById("locationResult").innerText = "Error: " + location.error;
        } else {
            document.getElementById("locationResult").innerText = "User Location: " + location.latitude + ", " + location.longitude;
        }
    });
});

HTML页面代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Location Capture Example</title>
</head>
<body>
  <h1>Location Capture Example</h1>
  <button id="getLocationButton">Get User Location</button>
  <div id="locationResult"></div>
  <script src="./dist/bundle.js"></script>
</body>
</html>

Webpack配置文件（webpack.config.js） #

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  optimization: {
    minimizer: [new TerserPlugin()],
  },
};

Package.json配置 #

{
  "name": "jssdk",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.0",
    "@babel/preset-env": "^7.23.2",
    "babel-loader": "^9.1.3",
    "terser-webpack-plugin": "^5.3.9",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4"
  }
}

已做排查 #

• 添加devtool: 'source-map'到Webpack配置，移除optimization压缩配置
• 更换过相关依赖包版本
• 错误定位到const geolocationAdapter = new GeolocationAdapter();，但无法明确具体错误原因

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