使用Aurelia调试第三方脚本

Question

我刚刚使用Aurelia开始了一个新项目，并且无法使用Chromes Dev Tools调试第三方插件（本例中为aurelia-auth）。

我试图调试插件，以便了解为什么我尝试的东西不起作用，并且更好地理解插件的内部结构。

当我尝试调试插件时，开发工具无法跳转到正确的来源，但在我的SCSS中错误地向我显示了一些断点：

出于复制目的，我创建了一个非常简单的CLI项目，其中包含以下步骤，这些步骤略有不同，但也不符合预期：

• au new具有以下选项：
  TypeScript，Sass，Testing Yes，WebStorm，Create structure＆amp; Install all dependencies
• 调整后的app.html＆amp; app.ts（下面的代码）
• 使用npm install aurelia-auth --save
安装aurelia-auth plugin
• 已添加aurelia-auth＆amp; aurelia-fetch-client aurelia_project/aurelia.json的依赖关系（下面的代码）
• 使用au run --watch
启动内部服务器
• 在Chrome中打开http://localhost:9000/并打开开发工具
• 尝试调试auth.authenticate，打开一个名为auth-service
的空文件

除了次优的调试体验之外，我能做些什么才能改善这一点？究竟是什么导致了它？ aurelia框架本身，TypeScript，CLI，......？

以下是演示项目中的简单代码：

app.html

<template>
    <button click.delegate="authenticate()">Auth</button>
</template>

app.ts

import {autoinject, Aurelia} from 'aurelia-framework';
import {AuthService, FetchConfig} from 'aurelia-auth';

@autoinject
export class Login {
    constructor(public auth: AuthService, public fetchConfig: FetchConfig) {
        this.auth = auth;
        this.fetchConfig = fetchConfig;
    }

    activate() {
        this.fetchConfig.configure();
    }

    authenticate(provider: String) {
        this.auth.authenticate(undefined, false, null);
    }
}

aurelia.json

{
    // ...
    "dependencies": [
        // ...
        {
            "name": "aurelia-auth",
            "path": "../node_modules/aurelia-auth/dist/amd",
            "main": "aurelia-auth"
        },
        "aurelia-fetch-client",
        // ...
    ]
}