How to use jquery ui with bower?

Question

I'm experimenting with yeoman and bower.

I have created a yeoman webapp using the following command

yo webapp

I want to use jqueryui so I have installed it using bower:

bower install jquery-ui --save

This works fine, but the jQuery UI component doesn't contain a javascript file with "all" the components, it just contains a lot of javascript files, one for each component.

Should I include only the javascript files that I need? Or should I do something else before using jQuery UI?

Thanks for the tips!

Answer 1

Added jquery-ui in dependencies of bower.json (or component.json) along with jquery.

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

Install them:

bower install

Then, added path to jqueryui In main.js and require it:

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';
   ...
});

It works for me.

Answer 2

You could use requirejs.config's shim property to achieve your goal:

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

We specified, that jquery.ui.sortable, when required in your project, needs to load and execute the modules listed under deps first, before being executed itself.

Unfortunately, this still produces a race condition... But that is generally how one would go about this (:

Answer 3

For reference, bower install jquery-ui --save would add the jquery-ui.js dependency to the project, but not the styles. For that I needed to add to the bower.json file an overrides section, as below

{
  ...,
  "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"
      ]
    }
  }
}

References:

https://stackoverflow.com/a/27419553/4126114

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

Answer 4

In the latest jQuery UI bower component as we speak (v. 1.10.3), you can do the following:

1. For the CSS themes, include the following link:

   <link rel="stylesheet" href="bower_components_path/jquery-ui/themes/base/jquery-ui.css">

2. To get the most components and widgets of jQueryUI running, include the following script:

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

Answer 5

I would just include the files that I need or use the default custom build in the folder (which I believe has all the components) if you require everything or if it's just for experimentation.

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

At this time bower pulls down the entire repo and since (from their website) "bower is just a package manager" anything else needed like concatenation or module loading is handled by other tools like sprockets/requirejs.

References:

Using packages with bower on homepage http://bower.io/

Dissusion about bower and pulling entire repos https://github.com/bower/bower/issues/45