javascript - Aurelia 依赖注入(inject)装饰器不工作

Question

我在使用 Aurelia 时让 @inject 装饰器工作时遇到问题(框架 v 0.17，依赖注入(inject) v 0.11.2)；我在装饰器上收到意外 token 错误。我试过 Chrome 46 和 FF Dev 44.0a2，都报同样的错误。我在 Chrome 中启用了实验性 javascript 功能。当我使用静态方法选项时，注入(inject)工作得很好。我还有用于转译器的 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

你的 babel 选项是什么样的？您将需要 es7.decorators 选项或将 stage 选项设置为 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"
  ]
};