Aurelia/ES6 definizione di classe e proprietà, errore di sintassi idraulico

Question

Sto cercando di far funzionare l'app di avvio di Aurelia, ma ho riscontrato un errore nella prima pagina. http://aurelia.io/get-started.html

Il codice in questione:

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}!`); 
    } 
} 

L'errore:

[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 

Devo dire che io sono su Windows, potrebbe creare qualche problema.

---

Ho "risolto" questo problema inserendo le variabili in un costruttore. Ma la sintassi sopra non è valida per ES6? è che ES7 o qualcosa non è ancora utilizzabile?

---

So che questo codice sembra strano, ma io non sono l'autore, è il codice originale da Aurelia esercitazione

Answer 1

La seguente sintassi non è la sintassi ES6 valida per le classi. MA, è la sintassi di inizializzatore di proprietà ES7 valida per le classi. Per usarlo, se stai usando Babel, devi essere sicuro di abilitare questa funzione in modo specifico. Questo è documentato nel blog di Aurelia ed è configurato come parte dell'ultimo scheletro.

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

Ma è la sintassi di cui sopra non valida ES6?

No, non lo è. I corpi di classe possono contenere solo definizioni di metodo. Sembra funzionare in modalità sperimentale di Babele, però.

Ho "risolto" questo problema inserendo le variabili in un costruttore.

Questa è la soluzione corretta. Dati proprietà dovrebbero essere proprietà di istanza in genere. Se si vuole metterli sul prototipo, dovrete farlo explcitly in 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!';