Babel为什么不改变我的类属性？

Question

我有以下内容 person.js

export class Person {
    firstName = ""
    lastName = ""
    middleName = "Nothing"

    constructor(first, last){
       this.firstName = first;
       this.lastName = last;
    }

    get fullName() {
       return this.firstName + " " + this.middleName + " " + this.lastName;
    }
}

每当我尝试运行Webpack时,我都会收到指向firstName双引号之间的第一个等号的语法错误.

如果我在构造函数之前删除所有属性,一切正常(尽管我必须middleName在构造函数中包含一个定义).

我不知道这是否是一个webpack问题,或者这是否是一个Babel问题.如果我将该代码输入Babel的在线测试编译器,Babel似乎没有问题.

我曾尝试使用配置巴贝尔babel-preset-es2015,babel-preset-es2016以及babel-preset-env并没有什么改变.

知道为什么会给我一个错误吗？属性定义是否仅在TypeScript中可用？

Answer 1

您需要使用包含此插件的插件transform-class-properties或stage-2预设.如果没有这个,你将无法转换类属性:

npm install --save-dev babel-plugin-transform-class-properties

要么:

npm install --save-dev babel-preset-stage-2

然后确保将其包含在您的.babelrc或其他配置方式中:

{
  "plugins": [
    "transform-class-properties"
  ]
}

要么:

{
  "presets:" [
    "stage-2"
  ]
}