如何将 JQuery-UI 与 Aurelia 一起使用答案

【问题标题】：How to use JQuery-UI with Aurelia如何将 JQuery-UI 与 Aurelia 一起使用
【发布时间】：2016-11-28 05:06:27
【问题描述】：

我使用 Aurelia CLI 启动了一个新的 Aurelia 应用程序。

我使用 Aurelia 文档中的说明安装了 JQuery 并配置了 aurelia.json：

http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/the-aurelia-cli/6

然后我 npm 安装了 Jquery-ui。

我现在需要知道如何配置 audelia.json 来识别 jquery-ui。

在 Aurelia 文档中，这个例子是关于如何引用模块的：

"dependencies": [
  {
    "name": "library-name",
    "path": "../node_modules/library-name/dist/library-name"
  }
]

问题在于，与直接下载 jquery-ui 不同，JQuery-ui 模块没有实际的 Jquery-ui.js 文件（如果有的话我找不到）。

谢谢

【问题讨论】：

该模块引用语法适用于单个文件模块，但 jQuery UI 有多个文件。除了name 和path 之外，您可能还需要使用main 来定义主模块文件。在您发布的 Aurelia doc sample 中向下滚动一点，您会在“A CommonJS Package”和“A Legacy Library”下找到使用 main 的示例。
我知道，但它仍然没有回答确切如何做的问题
我今天也尝试安装它，但无法让它工作。我会对解决方案感兴趣。
我也坚持这一点。我让 jquery-ui 与 jspm 一起工作，但还没有开始与 cli 一起工作。感谢您的帮助。
Aurelia 新手在这里，但请在下面查看我的答案，看看它是否有帮助...

标签： javascript aurelia

【解决方案1】：

据我所知，jquery-ui 包不包含“内置”版本的 jquery-ui。我终于通过使用 jquery-ui-dist 包完成了这项工作，其中包括默认的 jquery-ui.js 和 jquery-ui.css 文件。

npm install jquery-ui-dist --save

现在将 aurelia.json 添加到 vendor-bundle 的依赖项中：

    "dependencies": [
      "aurelia-binding",
      ...
      "jquery",
      {
        "name": "jquery-ui-dist",
        "path": "../node_modules/jquery-ui-dist",
        "main": "jquery-ui",
        "deps": ["jquery"],
        "resources": [
          "jquery-ui.css"
        ]
      },
    ]

请注意，我们首先加载 jquery。 “main”属性告诉它应该从该目录加载 jquery-ui.js。 “deps”属性告诉它它依赖于 jquery。最后，“资源”属性包括默认的 jquery-ui.css。

现在在 app.html 中，确保需要 css 文件：

<require from="jquery-ui-dist/jquery-ui.css"></require>

在 ts 文件中使用：

import * as $ from 'jquery';
import 'jquery-ui-dist';

【讨论】：

【解决方案2】：

我使用的是 Aurelia 1.0.X，更新后我需要这两个导入来使用任何 jQuery-UI 小部件，在这种情况下是可拖动的。它也适用于导入滑块或调整大小。

import $ from 'jquery';
import {draggable} from 'jquery-ui';

在我的package.json中，我的jspm依赖如下：

"jquery": "npm:jquery@^3.2.1",
"jquery-ui": "github:components/jqueryui@^1.12.1"

【讨论】：

【解决方案3】：

将 jquery-ui.js 的副本添加到您的静态文件夹，并将这一行添加到您的构造函数到您打算使用 jquery-ui 的类中，请注意：它应该引用您的 jquery-ui 文件的位置

import { $ } from 'jquery';
export class Index
{
  constructor(){
    require('../../../../../static/assets/js/jquery-ui');
  }
}

【讨论】：