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

Question

当使用Aurelia时，我遇到了使@inject装饰器工作的问题（框架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/[email protected]/browser.js:62826:13)
    at Parser.pp.unexpected (http://localhost:8088/jspm_packages/npm/[email protected]/browser.js:64056:8)
    at Parser.pp.parseDecorator (http://localhost:8088/jspm_packages/npm/[email protected]/browser.js:63295:10)
    at Parser.pp.parseDecorators (http://localhost:8088/jspm_packages/npm/[email protected]/browser.js:63281:37)
    at Parser.pp.parseStatement (http://localhost:8088/jspm_packages/npm/[email protected]/browser.js:63183:10)
    at Parser.parseStatement (http://localhost:8088/jspm_packages/npm/[email protected]/browser.js:64679:22)
    at Parser.pp.parseTopLevel (http://localhost:8088/jspm_packages/npm/[email protected]/browser.js:63155:21)
    at Parser.parse (http://localhost:8088/jspm_packages/npm/[email protected]/browser.js:62795:17)
    at Object.parse (http://localhost:8088/jspm_packages/npm/[email protected]/browser.js:61662:50)
    at Object.exports.default (http://localhost:8088/jspm_packages/npm/[email protected]/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"
    ]
  },

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

babel-options.js

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

Answer 2

我在Aurelia-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"
  }

我们添加了“babel-plugin-transform-decorators-legacy”插件来解决这个问题。