Load jQuery before RequireJS and still use it as dependency

If you use RequireJS and jQuery in a project, you might find yourself in a situation, where you embed jQuery before RequireJS, but still need to have the “jquery” dependency respected. Unfortunately, in the usual scenario it’s essential, that RequireJS is loaded before jQuery to provide the define() method, that jQuery registers it with.

<!-- this will fail with an error: -->
<script src="jquery.js"></script>
<script src="require.js" data-main="main.js"></script>
<!-- likewise, if you optimized the main.js file but excluded jQuery -->

So, if you have already loaded jQuery but need to refer to it in other modules, e. g., like define(["jquery"], ...), you find yourself in the nasty situation, that the browser tells you, that this module “jquery” couldn’t be found.

We have therefore to manually repeat the steps the jQuery library itself does to register as module. Put this at the top of your main.js file:

define('jquery', [], function() {
    return jQuery;
});

and you’re set. These lines mimic the according part in jQuery, which isn’t executed due to the lack of define(), when it was reached. Now you can happily define modules depending on “jquery” and even optimize it with r.js excluding the jQuery file itself:

define(['jquery'], function($) {
    // module code using "$" goes here
});