【问题标题】：How Can I Use Class Fields with Parcel Bundler?如何在 Parcel Bundler 中使用类字段？
【发布时间】：2020-04-09 10:04:58
【问题描述】：

当我使用使用公共 ES6 类字段声明时，我收到错误“Missing class properties transform.”。如何修改我的包裹设置以允许这样做？

当前代码

index.html

<body>
  <div id="greeting"></div>
  <script src="./app.js"></script>
</body>

app.js

class Greeter {
  greeting = 'Hello';

  constructor(container, name) {
    container.innerText = `${this.greeting} ${name}`;
  }
}

new Greeter(document.querySelector('#greeting'), 'Justin');

解决方法

如果我删除 greeting = 'Hello'; 声明，我只能让它工作：

class Greeter {

  constructor(container, name) {
    this.greeting = 'Hello';
    container.innerText = `${this.greeting} ${name}`;
  }
}

new Greeter(document.querySelector('#greeting'), 'Justin');

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
@LawrenceCherone 我的浏览器compatibility 不是问题。你有使用 Babel 和 Parcel 的解决方案吗？

标签： javascript es6-class parceljs

【解决方案1】：

将以下内容添加到文件.babelrc：

{
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

请参阅@babel/plugin-proposal-class-properties 了解更多详情。您应该也可以使用公共、静态和新的private fields。

【讨论】：