Aurelia 依赖注入装饰器不工作

Question

我在使用 Aurelia（框架 v 0.17，依赖注入 v 0.11.2）时让 @inject 装饰器工作时遇到问题；我在装饰器上收到意外令牌错误。 Chrome46和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

你的 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"
  ]
};

Answer 2

我在使用 Aurelia-cli 应用程序时遇到了同样的问题。解决方法很简单。

只需更新 Aurelia.json 文件跨极配置如下：

"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" 插件来解决这个问题。

Aurelia 依赖注入装饰器不工作

Aurelia Dependency Injection Decorator Not Working

javascript

dependency-injection

decorator

aurelia