Как использовать jquery ui с беседкой?

Я экспериментирую с yeoman и bower.

Я создал веб-приложение yoman с помощью следующей команды

yo webapp

Я хочу использовать jqueryui, поэтому я установил его с помощью беседки:

bower install jquery-ui --save

Это прекрасно работает, но компонент jQuery UI не содержит javascript файл со всеми компонентами, он просто содержит много файлов javascript, по одному для каждого компонента.

Должен ли я включать только файлы javascript, которые мне нужны? Или я должен сделать что-то еще, прежде чем использовать jQuery UI?

Спасибо за советы!

Ответ 1

Добавлен jquery-ui в dependencies из bower.json (или component.json) вместе с jquery.

{
  …,
  "dependencies": {
    "jquery": "~1.9.1",
    "jquery-ui": "~1.10.3",
    ...
  },
  …
}

Установите их:

bower install

Затем добавьте путь к jqueryui In main.js и потребуйте его:

require.config({
  paths: {
    jquery: '../components/jquery/jquery',
    jqueryui: '../components/jquery-ui/ui/jquery-ui',
    …
  },
  shim: {
    jqueryui: 'jquery',
    …
  },
  …
});
require(['app', 'jquery', 'jqueryui', 'bootstrap'], function (app, $) {
  'use strict';
   ...
});

Это работает для меня.

Ответ 2

В последней компоненте jQuery UI bower, как мы говорим (v.1.10.3), вы можете сделать следующее:

Для тем CSS укажите следующую ссылку:

<link rel="stylesheet" href="bower_components_path/jquery-ui/themes/base/jquery-ui.css">
Чтобы получить большинство компонентов и виджетов jQueryUI, включите следующие script:

<script src="bower_components_path/jquery-ui/ui/jquery-ui.js" ></script>

Ответ 3

Для справки, bower install jquery-ui --save добавит зависимость jquery-ui.js к проекту, но не стили. Для этого мне нужно было добавить в файл bower.json файл overrides, как показано ниже

{
  ...,
  "dependencies": {
    ...,
    "jquery-ui": "^1.11.4" // already added with --save from bower install command
  },
  ...,
  "overrides": {
    "jquery-ui": {
      "main": [
        "themes/smoothness/jquery-ui.css",
        "jquery-ui.js"
      ]
    }
  }
}

Литература:

fooobar.com/questions/227191/...

https://github.com/taptapship/wiredep/issues/86

Ответ 4

Я бы просто включил файлы, которые мне нужны, или использовать стандартную сборку по умолчанию в папке (которая, как я считаю, имеет все компоненты), если вам требуется все или только для экспериментов.

<script src="components/jqueryui/ui/jquery-ui.custom.js"></script>

В это время беседа вытаскивает все репо и, поскольку (с их сайта) "беседка - это просто менеджер пакетов", все, что нужно, например, конкатенация или загрузка модуля, обрабатывается другими инструментами, такими как звездочки/требования.

Литература:

Использование пакетов с bower на домашней странице http://bower.io/

Рассеяние бесед и вытягивание целых репозиториев https://github.com/bower/bower/issues/45

Ответ 5

Вы можете использовать свойство requirejs.config shim для достижения своей цели:

requirejs.config({
    shim: {
        'jquery.ui.sortable': {
            deps: ['jquery', 'jquery.ui.core', 'jquery.ui.widget', 'jquery.ui.mouse', 'jquery.ui.position'],
            exports: '$'
        }
    }
});

Мы указали, что jquery.ui.sortable, когда требуется в вашем проекте, должен сначала загрузить и выполнить модули, перечисленные в разделе deps, перед тем, как выполнить его.

К сожалению, это все еще вызывает состояние гонки... Но обычно это так, как это можно было бы сделать (: