Aurelia依赖注射装饰器不起作用

Question

@inject使用Aurelia时,我遇到了让装饰器工作的问题(框架v 0.17,依赖注入v 0.11.2); 我在装饰器上收到一个意外的令牌错误.我已经尝试了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选项或将stage选项设置为0.

config.js

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

这是骨架导航项目的选项:

巴别塔,options.js

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