Aurelia Dependency Injection Decoratorが動作しない

Question

Aurelia（フレームワークv 0.17、依存性注入v 0.11.2）を使用しているときに@injectデコレータが動作するのに問題があります。デコレータに予期しないトークンエラーが表示されます。私はChrome 46とFF Dev 44.0a2の両方を試しましたが、どちらも同じエラーを報告します。 Chromeで実験的なjavascript機能を有効にしました。私は静的メソッドのオプションを使用すると注入がうまく動作します。私は蒸散器のためにBabel 5.8も持っています。ここで

は私app.jsです：

import {inject} from 'aurelia-framework'; 
import {HttpClient} from 'aurelia-http-client'; 

@inject(HttpClient) // DI fails with decorator 
export class App { 

    constructor(http) { 
     http.configure(config => { 
      config 
       .withHeader("Accept","application/json") 
       .withBaseUrl("http://localhost/projects/api/"); 
     }) 
     this.http = http; 
    } 

    //static inject() { return [HttpClient]; } // DI works fine with inject method 

    activate() { 
     return this.http.get("Project/Projects") 
         .then(response => { 
          this.projects = response.content; 
         }); 
    } 

} 

はここでChromeからのエラーです：

Error: http://localhost:8088/app.js: Unexpected token (4:0) 
    2 | import {HttpClient} from 'aurelia-http-client'; 
    3 | 
> 4 | @inject(HttpClient) 
    |^
    5 | export class App { 
    6 | 
    7 |  constructor(http) { 
    Error loading http://localhost:8088/app.js 
    at Parser.pp.raise (http://localhost:8088/jspm_packages/npm/babel-core@5.8.33/browser.js:62826:13) 
    at Parser.pp.unexpected (http://localhost:8088/jspm_packages/npm/babel-core@5.8.33/browser.js:64056:8) 
    at Parser.pp.parseDecorator (http://localhost:8088/jspm_packages/npm/babel-core@5.8.33/browser.js:63295:10) 
    at Parser.pp.parseDecorators (http://localhost:8088/jspm_packages/npm/babel-core@5.8.33/browser.js:63281:37) 
    at Parser.pp.parseStatement (http://localhost:8088/jspm_packages/npm/babel-core@5.8.33/browser.js:63183:10) 
    at Parser.parseStatement (http://localhost:8088/jspm_packages/npm/babel-core@5.8.33/browser.js:64679:22) 
    at Parser.pp.parseTopLevel (http://localhost:8088/jspm_packages/npm/babel-core@5.8.33/browser.js:63155:21) 
    at Parser.parse (http://localhost:8088/jspm_packages/npm/babel-core@5.8.33/browser.js:62795:17) 
    at Object.parse (http://localhost:8088/jspm_packages/npm/babel-core@5.8.33/browser.js:61662:50) 
    at Object.exports.default (http://localhost:8088/jspm_packages/npm/babel-core@5.8.33/browser.js:7779:18) 

私が一望できるよという単純な何かがあるに違いありません。多分蒸散のためでしょうか？

Answer 1

あなたのベイベルオプションはどのように見えますか？ es7.decoratorsオプションが必要、またはオプションを0に設定する必要があります。

config.js

System.config({ 
    defaultJSExtensions: true, 
    transpiler: "babel", 
    babelOptions: { 
    "optional": [ 
     "es7.decorators", 
     "es7.classProperties", 
     "runtime" 
    ] 
    }, 

ここでスケルトン・ナビゲーション・プロジェクトのオプションです：

babel-options.js

module.exports = { 
    modules: 'system', 
    moduleIds: false, 
    comments: false, 
    compact: false, 
    stage:2, 
    optional: [ 
    "es7.decorators", 
    "es7.classProperties" 
    ] 
}; 

Answer 2

私はアウレリア-CLIアプリケーションで同じ問題を抱えていました。解決策は非常に簡単です。

ただ、下記のようAurelia.jsonがtranspolarコンフィギュレーションファイルの更新：我々は問題を修正し、「バベル・プラグイン・変換・デコレーター・レガシー」のプラグインを追加した

"transpiler": { 
    "id": "babel", 
    "displayName": "Babel", 
    "fileExtension": ".js", 
    "options": { 
     "plugins": [ 
     "transform-es2015-modules-amd", "babel-plugin-transform-decorators-legacy" 
     ] 
    }, 
    "source": "src/**/*.js" 
    } 

。