23

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!

Vektor
  • 560
  • 4
  • 15
cremersstijn
  • 2,375
  • 4
  • 28
  • 41

5 Answers5

17

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.

hiroshi
  • 6,871
  • 3
  • 46
  • 59
5

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>

ambodi
  • 6,116
  • 2
  • 32
  • 22
5

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

Community
  • 1
  • 1
Shadi
  • 9,742
  • 4
  • 43
  • 65
3

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

Craig MacGregor
  • 4,589
  • 1
  • 21
  • 13
  • 1
    great post! the idea of bower is great but it lacks definitly a way of delivering a whole package of a library (even if the project doesn't compile into a single resource). until now bower is a nightmare :) – Johann Sonntagbauer Apr 30 '13 at 18:53
  • That jquery-ui.custom.js does not exist anymore as of 1.10.2. I suppose you need some grunt task to build that? – Matt Hughes Oct 01 '13 at 15:54
-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 (:

Florian Glatz
  • 163
  • 4