How to make jQuery plugin downloadable with requirejs

Question

I work with requirejs + jquery and I was wondering if there was a reasonable way to get the jQuery plugin to work with requirements.

For example, I use jQuery cookie. If I understand correctly, I can create a file called jquery-cookie.js and inside do

define(["jquery"], // Require jquery function($){ // Put here the plugin code. // No need to return anything as we are augmenting the jQuery object }); requirejs.config( { "shim": { "jquery-cookie" : ["jquery"] } } ); 

I was wondering if I can do things like jQuery like this:

 if ( typeof define === "function" && define.amd && define.amd.jQuery ) { define( "jquery", [], function () { return jQuery; } ); } 

or if this is the only way to make jQuery plugins compatible with requirejs or any amd

Answer 1

You only need to do

 define(["jquery"], // Require jquery function($){ // Put here the plugin code. // No need to return anything as we are augmenting the jQuery object }); 

at the end of jquery cookie.js, OR

 requirejs.config( { "shim": { "jquery-cookie" : ["jquery"] } } ); 

somewhere before you enable the jquery cookie (e.g. wherever the main data is located, e.g.).

The last block of code you posted is good for things like jQuery that are redistributed and may or may not be in an AMD environment. Ideally, every jQuery plugin would already install.

I prefer the included libraries to be as clean as possible, so the global shim configuration on the page seems to be the cleanest solution for me . In this way, updates become more secure and CDNs become an opportunity.

Answer 2

There are a few caveats with using the washer configuration in RequireJS, referenced at http://requirejs.org/docs/api.html#config-shim . Namely: “Do not mix CDN loading with strip configuration in assembly” when you use the optimizer.

I was looking for a way to use the same jQuery plugin code on sites with and without RequireJS. I found this snippet for jQuery plugins at https://github.com/umdjs/umd/blob/master/jqueryPlugin.js . You port your plugin to this code and it will work anyway.

 (function (factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module depending on jQuery. define(['jquery'], factory); } else { // No AMD. Register plugin with global jQuery object. factory(jQuery); } }(function ($) { $.fn.yourjQueryPlugin = function () { // Put your plugin code here }; })); 

Credit goes to jrburke; like many javascript, it functions inside functions acting on other functions. But I think I unpacked what he does.

The argument to the factory function in the first line itself is a function that is called to define the plugin in the $ argument. When there is no AMD compatible bootloader, it is called directly to determine the plugin on the jQuery global object. This is exactly the same as the general idiom of a plugin definition:

 function($) { $.fn.yourjQueryPlugin = function() { // Plugin code here }; }(jQuery); 

If there is a module loader, then factory registered as a callback for the loader, which will be called after jQuery is loaded. A downloadable copy of jQuery is an argument. It is equivalent

 define(['jquery'], function($) { $.fn.yourjQueryPlugin = function() { // Plugin code here }; }) 

Answer 3

Just like FYI for all some jquery plugins, they already use amd / require, so you don't need to declare anything in the pad. In fact, this can cause problems for you in some cases.

If you look in the jquery cookie JS, you will see the definition of calls and require (["jquery"]).

and in jquery.js you will see a call to define ("jquery", [], function () ...