Using jQuery with Aurelia

Using jQuery with Aurelia

本文关键字：Aurelia with jQuery Using      更新时间：2023-09-26

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

所以我的配置.js看起来像：

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

在应用程序中.js我像这样导入jQuery：

var $ = require('jquery');

但是当我需要它时，我会得到空白网站。导入也是如此：

import $ from 'jquery';

怎么了？

谢谢

编辑：好的，解决了。问题是，jQuery代码必须在attached（）mehtod中调用。所以像这样：

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

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

但是如果你使用Aurelia骨架，你可以从bootstrap导入它 

import 'bootstrap';

然后在应用中的所有位置使用 $，或者

import $ from 'bootstrap'

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

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

主 HTML 页面
中 jQuery 的脚本标记来自主 HTML 页面中第三方 JS 库的脚本标记

工作完成！

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

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

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

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

链接到 plunker 中的示例。

npm install jquery --save

并添加到Aurelia.json中供应商捆绑包的依赖项部分：

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

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

相关文章：