用于 esnext 私有字段和方法的 webpack 加载器？

Question

所以我是 webpack 的新手，我正在尝试配置它以使用 esnext 私有方法和字段。我还没有指定加载器，但我不确定使用哪一个。目前，我的webpack.config.js文件如下所示：

const path = require("path");

module.exports = {
    entry: "./src/Rorke.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "rorke.js"
    }
};

当我运行时webpack，它抛出一个错误： Unexpected character '#'

Rorke.js 看起来像这样：

import Sprite from "./Sprite";
const test = new Sprite(0, 0);

和 Sprite.js 看起来像：

export default class Sprite {
    #x;
    #y;
    constructor(x, y) {
        this.#x = x;
        this.#y = y;
    }
}

当我使用没有私有字段的常规 es6 类时，它可以正常工作，但不能用于私有字段。

我应该使用哪个装载机/我该如何解决这个问题？

Answer 1

我用一个名为的 babel 插件解决了这个问题：

@babel/plugin-proposal-private-methods

//babel.config.js
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: { node: "current" },
      },
    ],
    "@babel/preset-typescript",
  ],
  plugins: [
    "@babel/plugin-proposal-private-methods",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread",
  ],
};