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配置Babel，但没有任何变化。

知道为什么会给我一个错误吗？类似的属性定义是否仅在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"
  ]
}

Answer 2

您可能在eslintrc.json文件中缺少"parser":"babel-eslint",。这将确保使用babel解析器。

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

2 个答案: