Easy optional dependency on jQuery for RequireJS between Node.JS and browser

Question

I'm using RequireJS, and trying to pack up a jQuery widget for easy usage into one file. Inside the widget's JavaScript code are a certain number of non-UI functions that don't call $-anything, that I'd like to export and be able to use on the server side.

(The shared routines that don't depend on jQuery used to be in a separate module called client-server-common.js. But like I said, I'm looking to reduce the number of files...and there's no real reason to be hung up on including the dead code for the widget on the server. So the widget can just subsume the common code.)

I'd like my only dependencies for the widget to be jQuery and underscore, with jQuery optional (and it degrades into what was client-server-common.js in that case). So the interface I'm looking for would be like:

require(['jquery', 'underscore'], function ($, _) {
    var exports = {...};

    if ($) {
        // Do the stuff that only makes sense in the client
        // Totally fine if there is no jquery; in that case
        // all we probably care about are the exports
        ...
    }

    // Do the stuff for both client and server
    ...

    // Return the exported functions
    return exports;        
}

Reading up on what others have asked, I notice this answer to this question from January says "You cannot really set it optional":

requireJS optional dependency

That's not what I want. Is that the last word? :-/

It seems that I can get around this by installing the jquery NPM package, which apparently does stuff with the DOM somehow:

Can I use jQuery with Node.js?

My understanding would be that if I added this dependency and just ignored it, I'd be okay. I might even find that there was some good reason to do DOM manipulation on the server (I haven't thought enough to figure out why or how that would be useful, is it?)

So should I add the dependency for simplicity's sake, and just not use it? Or can I rig it up so that I just give a jQuery of null on the server configuration, through some magic that doesn't involve waiting for timeouts and errors and hacks? Could someone make a "jquery-null" package that somehow just came back and gave you a {} or null for jQuery to smooth over situations like this?

Advice appreciated! :-/

Answer 1

The answer you mention says "You cannot really set it optional" and then gives a solution to operate even in the absence of modules. You can use an errback that will do nothing if running server-side.

The following code assumes that RequireJS' require call is available as requirejs. When loading RequireJS in a browser, this is the default (that is, after loading RequireJS requirejs === require is true.) Server-side, you would have to make it available with something like:

if (typeof window === "undefined")
    var requirejs = require('requirejs');

(The above code would obviously fail if there is something in Node that sets window globally. I've never run into this problem.)

Once the above is taken care of we can do:

requirejs(['underscore'], function (_) {
    var exports = {...};

    requirejs(['jquery'], function ($) {
        // This will execute only if jquery is present.

        // Do the stuff that only makes sense in the client
        // Totally fine if there is no jquery; in that case
        // all we probably care about are the exports
        ...
    }, function (err) {
        // This will execute if there is an error.

        // If server-side, do nothing. If client-side, scream!
    });

    // Do the stuff for both client and server
    ...

    // Return the exported functions
    return exports;        
});

The answer you mentioned and RequireJS' documentation (which I linked above) mention checking the id of the failed module and undefining it. I'm quite certain that you would not need to undefine it since you won't try to load it again from a different place. Checking the module id would be a way to future-proof your code if someday jQuery depends on some other thing. Right now, loading jQuery just loads jQuery so if there is a failure it cannot be any other module than jQuery.

I would not include the actual code of jQuery server-side unless I'd have an actual substantial reason for it. What I would do if I wanted to get rid of the errback, for whatever reason, would be to have a build of my code for server-side use that includes a fake jQuery module. Something like:

define(function() {
    return "I'm totally fake";
});

And then test it:

requirejs(['jquery'], function ($) {
    if ($ !== "I'm totally fake") {
        // Do the real deal.
    }
});

If you do eventually need jQuery server-side, you'll have to also install something like jsdom. It used to be that installing jQuery with npm install jquery would include jsdom in the installation but I think this has changed recently.

Answer 2

I'm using RequireJS, and trying to pack up a jQuery widget for easy usage into one file. [..] I'd like my only dependencies for the widget to be jQuery and underscore, with jQuery optional [..] Reading up on what others have asked, I notice this answer to this question from January says "You cannot really set it optional" [..] That's not what I want. Is that the last word? :-/

No it's not the last word

This can be done elegantly and simple actually. I've described how to use an AMD module only when it's loaded in my answer to that question, but I'll repeat the gist of it here:

define(['require'], function(require){
  if (require.defined('jquery') {
    var $ = require('jquery');
    $.fn.something = function(){};
  }
});

We don't add the dependency directly, but instead manually require it only when it's already defined so we don't trigger any requests.

This form in which we declare a dependency on require, then use that inside our module is actually recommended by the RequireJS author, but my experimentation indicates that this actually also works:

define(require.defined('jquery') ? ['jquery'] : [], function($){
    if ($) {
        // Yippee, all jQuery awesomeness is available
    } 
});