Aurelia / ES6 class 和属性定义，管道工语法错误

Question

我正在尝试让 Aurelia 的入门应用程序正常运行，但我在第一页就遇到了错误。 http://aurelia.io/get-started.html

有问题的代码：

export class Welcome {
  heading = 'Welcome to the Aurelia Navigation App!';
  firstName = 'John';
  lastName = 'Doe';

  get fullName(){
    return `${this.firstName} ${this.lastName}`;
  }

  welcome(){
    alert(`Welcome, ${this.fullName}!`);
  }
}

错误：

    [21:46:19] Plumber found unhandled error:
 SyntaxError in plugin 'gulp-babel'
Message:
    D:/workspace/aurelia/navigation-app/src/app.js: Unexpected token (2:10)
  1 | export class Welcome {
> 2 |   heading = 'Welcome to the Aurelia Navigation App!';
    |           ^
  3 |   firstName = 'John';
  4 |   lastName = 'Doe';
  5 |
[21:46:19] Finished 'build-system' after 20 ms

不得不说我在windows，这可能会造成一些麻烦。

我 "solved" 通过将变量放在构造函数中来解决这个问题。但是上面的语法不是有效的 ES6 吗？是 ES7 还是什么东西还不能用？

我知道这段代码看起来很奇怪但我不是作者，它是 Aurelia 教程的原始代码

Answer 1

But is the syntax above not valid ES6?

不，不是。 Class 主体只能包含方法定义。不过，它似乎在 Babel 的实验模式下工作。

I "solved" this problem by putting the variables in a constructor.

这是正确的解决方案。 Data properties 通常应该是实例属性。如果你想把它们放在原型上，你必须在 ES6 中明确地这样做：

export class Welcome {
  constructor() {
    this.firstName = 'John';
    this.lastName = 'Doe';
  }

  get fullName(){
    return `${this.firstName} ${this.lastName}`;
  }

  welcome(){
    alert(`Welcome, ${this.fullName}!`);
  }
}
Welcom.prototype.heading = 'Welcome to the Aurelia Navigation App!';

Answer 2

以下语法对于类是无效的 ES6 语法。但是，它是类的有效 ES7 属性初始化语法。要使用它，如果您使用的是 Babel，则需要确保专门启用此功能。这记录在 Aurelia 博客中，并配置为最新框架的一部分。

export class Welcome {
  heading = 'Welcome to the Aurelia Navigation App!';
  firstName = 'John';
  lastName = 'Doe';

  get fullName(){
    return `${this.firstName} ${this.lastName}`;
  }

  welcome(){
    alert(`Welcome, ${this.fullName}!`);
  }
}

Aurelia / ES6 class 和属性定义，管道工语法错误

Aurelia / ES6 class and property definition, plumber syntax error

javascript

ecmascript-6

aurelia

Aurelia / ES6 class 和 属性 定义，管道工语法错误

Aurelia / ES6 class and property definition, plumber syntax error

javascript

ecmascript-6

aurelia

Aurelia / ES6 class 和属性定义，管道工语法错误