Question

我有一个Aurelia应用程序，在app.js中我想使用jQuery。

所以我的config.js看起来像：

System.config({
...
  map: {
    ...
    "jquery": "npm:jquery@2.2.0",
    ...
   }
}

在app.js中我像这样导入jQuery：

var $ = require('jquery');

但是当我需要它时，我得到了空白网站。与导入相同：

import $ from 'jquery';

有什么问题？

由于

编辑：好的，解决了。问题是，必须在附加的（）方法中调用jQuery代码。像这样：

export class Class1 {
    attached() {
        //jQuery code here
    }
}

Answer 1

您需要从https://github.com/components/jquery

安装jquery

但是如果你使用aurelia-skeleton，你可以从bootstrap

导入它

import 'bootstrap';

然后在app中的任何地方使用$或

import $ from 'bootstrap'

同样适用于jqueryui。如果需要，请从https://github.com/components/jqueryui

获取

Answer 2

只是为了与众不同！我们使用jQuery，我尝试通过config.js添加它并使用导入等 - 这工作正常。但是我们还使用了几个js库，我们使用主html页面中的脚本标记加载这些库，这些库需要jquery。我尝试使用import加载它们但它们并不是真的为它设计而且它太复杂了所以最后我们只是让生活变得非常简单：

主html页面中jquery的脚本标签
来自主html页面中第三方js库的脚本标记

完成工作！

如果您愿意，它还具有从CDN加载jquery和库的潜在好处。

也许失去了通过导入加载模块的好处，但是我们在整个应用程序中同时使用了jquery和其他库，所以我们并没有真正丢失加上我不必记得在创建新模块时导入它们： - ）

Answer 3

jquery安装在\ jspm_packages \ github \ components中（至少在我的情况下）。如果是这种情况，您应该使用：

System.config({
...
  map: {
    ...
    "jquery": "github:components/jquery@2.2.0",
    ...
   }
}

链接到Example in plunker。

在Aurelia中使用jQuery

3 个答案: