与 Aurelia 一起使用 jQuery

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';

怎么了？

谢谢

编辑：好的，解决了。问题是，必须在 attached() 方法中调用 jQuery 代码。所以像这样:

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

Answer 1

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

安装 jquery

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

导入它

import 'bootstrap';

然后在应用程序的任何地方使用$，或者

import $ from 'bootstrap'

jqueryui也是如此。如果需要，请从 https://github.com/components/jqueryui

获取

Answer 2

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

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

Link 到 Example in plunker.

Answer 3

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

主要 html 页面中 jquery 的脚本标记
主 html 页面

中来自第三方 js 库的脚本标记

大功告成！

如果您愿意，它还有一个潜在的好处，即能够从 CDN 加载 jquery 和库。

可能会失去通过导入加载模块的好处，但我们在整个应用程序中同时使用 jquery 和其他库，所以我们并没有真正失败，而且我不必记得在什么时候导入它们我创建了一个新模块:-)

Answer 4

npm 安装jquery --保存

并添加到 aurelia.json 中 vendor-bundle 的依赖项部分：

{
     "name": "jquery",
     "path": "../node_modules/jquery/dist",
     "main": "jquery.min.js",
     "exports": "$",
     "map": "jquery.min.map"
}

然后您可以像往常一样在 jQuery 的代码中使用 $。

与 Aurelia 一起使用 jQuery

Using jQuery with Aurelia

javascript

jquery

aurelia