Question

我似乎无法让这些一起工作。我使用Aurelia CLI，并以类似的方式成功地为其他库（如select2，spin，moment和数字）完成。我似乎无法上班。这是我到目前为止所拥有的。

首先我运行了npm install toastr --save和typings install dt~toastr --global --save

在aurelia.json中，在vendor-bundle.js部分中，我添加了一个依赖项：

  "jquery",
  {
    "name": "toastr",
    "path": "../node_modules/toastr/build",
    "main": "toastr.min",
    "resources": [
      "toastr.min.css"
    ],
    "deps": ["jquery"]
  }

更新：重现的完整步骤

我安装了这些工具的这些版本：node（6.3.0），npm（3.10.3），au（0.17.0）

打开命令提示符并键入：

au new au-toastr
3 (Custom)
2 (Typescript)
3 (Sass)
1 (configure unit testing)
1 (Visual Studio Code)
1 (create project)
1 (install project dependencies)
cd au-toastr
npm install jquery --save
npm install toastr --save
typings install dt~jquery --global --save
typings install dt~toastr --global --save

然后在编辑器中打开aurelia.json并添加

"jquery",
{
"name": "toastr",
"path": "../node_modules/toastr/build",
"main": "toastr.min",
"resources": [
"toastr.min.css"
],
"deps": ["jquery"]
}

到依赖关系的底部。

由于与jquery的.d.ts文件冲突，在declare var $: cssSelectorHelper;上注释掉第1839行（typings/globals/angular-protractor/index.d.ts）。

用

替换app.ts内容

import * as toastr from 'toastr';

export class App {
  activate() {
    toastr.info('blah');
  }
}

OR

import 'toastr';

export class App {
  activate() {
    toastr.info('blah');
  }
}

在命令提示符下键入au run，然后打开浏览器并导航到命令行显示应用程序可用的URL（通常为http://localhost:9000）。

尝试1

import 'toastr';

export class ViewModel {
  activate() {
    toastr.info('blah');
  }
}

错误： ReferenceError：未定义toastr

尝试2

import {autoinject} from 'aurelia-framework';
import 'toastr';

@autoinject()
export class ViewModel {
  constructor(private toastr: Toastr) {
  }

  activate() {
    this.toastr.info('blah');
  }
}

错误： TypeError：this.toastr.info不是函数

尝试3

import * as toastr from 'toastr';

export class ViewModel {
  activate() {
    toastr.info('blah');
  }
}

错误： TypeError：toastr.info不是函数

尝试4

import {autoinject} from 'aurelia-framework';
import * as toastr from 'toastr';

@autoinject()
export class ViewModel {
  constructor(private toastr: Toastr) {
  }

  activate() {
    this.toastr.info('blah');
  }
}

错误： TypeError：this.toastr.info不是函数

当我从命令行运行au build时，所有上述内容都会正确转换。我没有错。

我迷失了我所缺少的东西，或者我还能尝试什么。任何帮助将不胜感激！

更新：我的猜测是，aurelia-cli中存在错误，或者更有可能我在某种程度上错误地处理了包aurelia-cli装载机制。当我从他们的站点获取打字稿骨架时，使用jspm作为它的模块加载器，并按照上面的相同步骤，toastr工作得很好。

我有什么想法可以让它与aurelia-cli一起使用？

Answer 1

经过很多时间和朋友的帮助，我终于能够让它发挥作用了。

只需要进行一些更改 -

需要更新

aurelia.json以不使用toastr库的缩小版本。

{
  //...
  "dependencies": [
  //...
    "jquery",
    {
      "name": "toastr",
      "path": "../node_modules/toastr",
      "main": "toastr",
      "resources": [
        "build/toastr.min.css"
      ],
      "deps": ["jquery"]
    }
  ]
}

toastr.info('here');函数调用通常需要在附加方法中或在元素在DOM中可用之后发生。

要求app.html中的HTML需要更新为

<require from="toastr/build/toastr.min.css"></require>

希望这有帮助。

<强>更新然后在视图模型中使用它，您可以通过以下几种方式之一来完成它：

import * as toastr from 'toastr';

export class App {
  attached() {
    toastr.success('here');
  }
}

import { success } from 'toastr';

export class App {
  attached() {
    success('here');
  }
}

toastr.js如何在Aurelia和Typescript中工作？

1 个答案: