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上，它可能会造成一些麻烦。

我通过将变量放在构造函数中来“解决”这个问题。但上面的语法是无效的ES6吗？是ES7或其他不可用的东西？

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

Answer 1

以下语法不适用于类的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}!`);
  }
}

Answer 2

但上面的语法是无效的ES6？

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

我＆＃34;解决了＃34;通过将变量放在构造函数中来解决这个问题。

这是正确的解决方案。数据属性通常应该是实例属性。如果你想把它们放在原型上，你必须在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!';

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

2 个答案: