Require a single module from a bundled library (i.e. jquery-ui)

Question

I am creating an application with durandal, which means I'm using requirejs. I decided to use the mighty knockout-sortable plugin. As it turns out, it uses jquery-ui features internally, which is nice. I also have defined the whole jquery-ui package in my app, so in my requirejs configuration it figures as

"jqueryui": "../Scripts/jquery-ui-1.10.3.custom",

What is more, the plugins author is using AMD loading to get jquery.ui.sortable, and here's the problem. The jquery-ui doesn't seem to define itself with requirejs, neither the whole package nor single modules.

Do I have to import any module from jquery-ui separately and for each define path in requirejs config so it is explicitly visible or is there a way to tell requirejs that there's already this jquery.ui.sortable module around inside jquery-ui that the plugin is asking for?

Answer 1

You should be able to setup a simple alias either using a path requirejs config

paths: {
  'jquery.ui.sortable': 'jquery-ui'
}

Or if that doesn't work, you could use the map config

map: {
  '*': {
    'jquery.ui.sortable': 'jquery-ui'
  }
}

Or when using map, you could even only setup alias for that one plugin

map: {
  'THE-JQUERY-UI-PLUGIN-ID': {
    'jquery.ui.sortable': 'jquery-ui'
  }
}

That last one makes it so that whevener the plugin in question makes a require("jquery.ui.sortable") call it actually pulls in jquery-ui module which you know has the sortable functionality built in already.

There also exists a jquery-ui-amd project which I quite like using. That project converts all jquery-ui modules into individual AMD modules https://github.com/jrburke/jqueryui-amd. You could use that for an easier and more modular integration into your project. However, even then you would need some aliasing as your plugin requires jquery.ui.sortable, but in jquery-ui-amd the id would be jquery-ui/sortable.