如何在 Aurelia 中使用 jQuery 插件答案

【问题标题】：How to use jQuery plugins with Aurelia如何在 Aurelia 中使用 jQuery 插件
【发布时间】：2018-10-11 02:56:06
【问题描述】：

如何在 Aurelia 中使用 jquery 插件？特别是，我正在尝试使用Notify.js。

在我的 package.json 下 jspm -> dependencies 如下：

"notifyjs-browser": "npm:notifyjs-browser@^0.4.2"

我已经尝试按如下方式导入它：

import { notify } from 'notifyjs-browser';

然后像这样使用它：

$.notify("Test 123", "error");

但是，我收到以下错误消息：

$.notify is not a function

我认为 Aurelia 中的任何 jQuery 插件都会遇到同样的问题。我该如何解决？

更新： 似乎只有在使用 JSPM 设置时才会出现问题，因为 @peinearydevelopment 的答案和我在 Aurelia 的“话语”页面上收到的关于 same question 的另一个答案两者都坚持 notifyjs 与 Aurelia CLI 配合得很好。如果我不必为了从 JSPM 更改为 Aurelia CLI 而重写所有内容，那就太好了。任何人都可以帮助解决这个问题吗？对于这个小问题，迁移到 Aurelia CLI 似乎需要做很多工作。

【问题讨论】：

尝试一下：import 'notifyjs-browser';
您是在使用 aurelia-cli 还是您的项目基于较旧的 jspm 框架之一？
@RabahG import 'notifyjs-browser' 不起作用。同样的错误。
@FredKleuver 我实际上是使用 .cshtml (Razor) 视图从头开始构建的，但它基于旧的 ES6 / JSPM 骨架之一。如果你愿意，你可以在这里找到我的作品的骨架：github.com/gordon-matt/aurelia-razor-netcore2-skeleton。我现在正在做的是一个更复杂、更真实的应用程序……但基本设置与此相同
迁移到 CLI 真的不应该是一个大问题，除非您有大量的自定义构建步骤。您的所有 VM 代码和模板都应该可以正常工作。

标签： jquery jquery-plugins aurelia notifyjs

【解决方案1】：

如果没有您的确切设置，很难给您一个完整的答案。您收到错误的原因是您尚未导入 jQuery。没有它，Aurelia，或者更具体地说，它的资源加载器不会将该脚本拉入您的应用程序，因此 notify 不是“函数”，因为它是 jQuery 原型的扩展。

我知道这是一个有点不同的设置，但这是我让该插件工作的方法。我使用 Aurelia cli 创建了一个新项目。

au new au-notifyjs

然后我安装了所需的软件包

au install jquery notifyjs-browser

这将安装 npm 包，更新您的 package.json 文件并使用对 js 文件的正确引用以及 notify 的 css 文件更新 aurelia.json 文件。

然后我更新了app.js 文件以测试它是否适用于以下内容：

import 'jquery';
import 'notifyjs-browser';

export class App {
  constructor() {
    this.message = 'Hello World!';
  }

  attached() {
    $.notify('Test 123', 'error');
  }
}

我运行应用程序，看到通知出现在屏幕的右上角。完整代码项目可以在here找到。希望这会有所帮助！

【讨论】：

谢谢，但恐怕你误会我不导入 jQuery 了。我确实已经将它导入并用于其他目的。我什至有 jQuery Validation 插件也可以正常工作。它们按如下方式导入并且工作正常：import $ from 'jquery'; 和 import { validation } from 'jquery-validation';。无论如何，我不确定这里的问题是什么。虽然我确实有一个 JSPM 设置（与 Aurelia CLI 不同，不确定这是否有任何区别）
知道为什么这在 JSPM 设置中不起作用吗？我可能不得不迁移到 Aurelia CLI。

【解决方案2】：

我无法让 Notify.js 在 JSPM 设置下工作，所以我决定寻找其他东西。我选择了aurelia-notification 插件，它运行良好。我仍然很想知道是什么问题使它在 JSPM 下工作，因为可能有其他库有同样的问题。所以如果有人有答案，请分享。

【讨论】：