8

So I've started to learn how to use requirejs and combine it with some of the other javascript libraries available. As I understand it you need to shim all the libraries that are not Asynchronous module definition compatible (AMD), but apart from searching through the library code for "require" is there an easier way to figure out which libraries support AMD and which do not? As an example I know that jquery supports AMD but jqueryui does not, and I only know this because "someone told me".

jfriend00
  • 683,504
  • 96
  • 985
  • 979
Stig Perez
  • 3,595
  • 4
  • 23
  • 36
  • You might clue people in that when you talk about AMD, you're not talking about the CPU/video semiconductor company, but I'm guessing you're talking about [Asynchronous Module Definition](http://gregfranko.com/blog/registering-the-jqueryui-widget-factory-as-an-amd-module/). – jfriend00 Nov 24 '13 at 23:12
  • 1
    @jfriend00, [Asynchronous_module_definition](http://en.wikipedia.org/wiki/Asynchronous_module_definition), you know that what `OP` meant, aren't you ? – The Alpha Nov 24 '13 at 23:12
  • 2
    I did NOT know what they meant. I thought they were asking about AMD video card compatibility. Only when I searched on Google did I find what they meant. I will edit the question myself to make sure it is clear to other readers. – jfriend00 Nov 24 '13 at 23:16
  • YUI3 has a complete and sophisticated module loader so it does not need requirejs. That library is also extremely modular, it uses that async. loading mechanism for its own (very numerous) modules right from the start. URL: http://yuilibrary.com/ – Mörre Nov 24 '13 at 23:29
  • You're right, I should have thought of the ambiguous meaning of AMD :-) – Stig Perez Nov 25 '13 at 11:49

2 Answers2

5

This is how jQuery declares its AMD. It's just a bunch of if statements. Unless libraries have some library.AMD === true, there's no way to check from the library itself.

if ( typeof module === "object" && module && typeof module.exports === "object" ) {
  module.exports = jQuery;
} else {
  window.jQuery = window.$ = jQuery;
  if ( typeof define === "function" && define.amd ) {
    define( "jquery", [], function () { return jQuery; } );
  }
}

However, there's a way to check already loaded modules. This answer states you can check require.s.contexts._.defined, which is an object containing the names-definition mapping of already loaded modules.

For example, if I loaded jQuery (which by default has AMD) into the page that also has RequireJS, a jquery property will exist in that object and contain the same jQuery object as the global. You can then compare. The following will return true:

require.s.contexts._.defined.jquery === jQuery
require.s.contexts._.defined.jquery === $

However, this assumes that you know the module name and/or there's a global to compare against. This might not work in all cases. For example, jQuery UI isn't just one big piece of code. It's a bunch of plugins housed under a jquery-ui.js. There's a possibility that either they could be named collectively or a module per widget. jQuery UI doesn't even have a global.

Community
  • 1
  • 1
Joseph
  • 117,725
  • 30
  • 181
  • 234
2

You'll be looking for AMD format define() calls in the sources, where they usually come in three flavors:

  • No AMD module defined, where you'll have to configure a shim in RequireJS;
  • Optional AMD support, where there's usually some sniffing going on for the define() dependency in the globals at the bottom;
  • First-class AMD module, where everything is wrapped in a call to define().

It's good to note that you'll get an error if your trying to shim an AMD module by mistake, or load a script as an AMD module that never calls define() to create one.

rink.attendant.6
  • 44,500
  • 61
  • 101
  • 156
Filip Dupanović
  • 32,650
  • 13
  • 84
  • 114
  • 1
    Thanks for clarifying that Filip. Just for the sake of curiosity I did a quick test on whether I would get an error if I shimmed an AMD-compatible library or visa-versa but as far as I can see I'm not getting anything in the console log. Do you have a short example that shows this? – Stig Perez Nov 25 '13 at 11:54