2015-04-13 16 views
5

Çalıştırmak için Aurelia'nın başlangıç ​​uygulamasını kullanmaya çalışıyorum, ancak ilk sayfada doğru bir hata alıyorum. Söz konusu Aurelia/ES6 sınıf ve özellik tanımı, tesisatçı sözdizimi hatası

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

hatası:

ben pencerelerde olduğumu söylemek zorunda
[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 

, bazı sıkıntıları yaratabilir.


Değişkenleri bir kurucuya koyarak bu sorunu çözdüm. Ama yukarıdaki sözdizimi geçerli ES6 değil mi? Bu ES7 veya henüz kullanılamayan bir şey mi?


Bu kod garip görünüyor biliyorum ama yazar değilim, bu Aurelia öğretici

+0

Kurulumunuzu bilmiyorsanız, neden çalışmadığını söylemek zor. Navigasyon uygulamasını pencerelerde yaptım ve işe yaradı. Belki de bağımlılıklarınla ​​ilgili bir problem. – talves

+0

Başlarken sayfasının tüm yönergelerini uyguladım. Ve sadece bir sözdizimi problemi bu kadar garip kılan bir şeydir ... – sam

+0

@sam Sorunuzu daha iyi bir içerik vermek için güncelledim, eğer katılmıyorsanız lütfen bana bildirin ve geri alabilirim. Sorun, ES6 sözdiziminizle ilgilidir ve Aurelia'ya özgü değildir. Mantıklı olmak? –

cevap

10

aşağıdaki sözdizimi sınıfları için geçerli ES6 sözdizimi değil. AMA, sınıflar için geçerli ES7 özellik başlatıcısı sözdizimi. Bunu kullanmak için Babel kullanıyorsanız, bu özelliği özellikle etkinleştirdiğinizden emin olmalısınız. Bu Aurelia blogunda belgelenmiştir ve en son iskeletin bir parçası olarak yapılandırılmıştır.

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

Teşekkürler! Şüphelendiğim şey bu, ve gerçekten de en son iskelet mükemmel çalışıyor, bu harika çerçeve için teşekkürler! – sam

+0

, nasıl etkinleştiririm? Aynı problemle karşılaşıyorum w/aurelia – chovy

+0

Babel seçenekleriniz şöyle bir şeye benzemelidir: modül.İhracat = { modülleri: 'sistem', moduleIds: false, yorumlar: false, kompakt : false, aşama: 2, opsiyonel: [// özellikler "es7.decorators" ın etkin olduğundan bu isteğe ES7 edin, "es7.classProperties" ] }; – EisenbergEffect

1

orijinal kodudur Ama geçerli ES6 yukarıdaki sözdizimi?

Hayır öyle değil. Sınıf kuruluşları sadece yöntem tanımlarını içerebilir. Yine de, Babil'in deneysel modunda çalıştığı görülüyor.

Değişkenleri bir kurucuya koyarak bu sorunu çözdüm.

Bu uygun çözümdür. Veri özellikleri, genellikle örnek özellik olmalıdır. Eğer prototip üzerinde onları koymak istiyorsanız, ES6 o explcitly yapmanız gerekecek:

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!'; 
+1

'da geçerli olmadığından hala Aurelia'nın başlangıç ​​sayfasının bu kodu neden verdiğine hala merak ediyorum, çünkü ES7 kodu olması gerekiyordu, o zaman sadece thast tahmin edebilirim kütüphaneleri ile çalışmak gerekiyor? – sam

+0

thias, aynı zamanda en iyi cevap olmasa da kötü bir yanıt değil –