将 jQuery 与 Aurelia 一起使用答案

【问题标题】：Using jQuery with Aurelia将 jQuery 与 Aurelia 一起使用
【发布时间】：2016-04-18 16:37:21
【问题描述】：

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

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

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

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

var $ = require('jquery');

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

import $ from 'jquery';

怎么了？

谢谢

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

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

【问题讨论】：

标签： javascript jquery aurelia

【解决方案1】：

你需要从https://github.com/components/jquery安装jquery

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

import 'bootstrap';

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

import $ from 'bootstrap'

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

【讨论】：

【解决方案2】：

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

主 html 页面中 jquery 的脚本标记
主 html 页面中来自 3rd 方 js 库的脚本标记

任务完成！

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

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

【讨论】：

【解决方案3】：

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

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

链接到Example in plunker。

【讨论】：

好的，但是如何导入控制器呢？为什么不是 var $ = require('jQuery');工作吗？
我不确定var $ = require('jquery')（注意：jquery，而不是 jQuery），但here 是指向带有import $ from 'jquery'; 的工作版本的链接

【解决方案4】：

npm install jquery --save

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

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

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

【讨论】：