Stop global jquery with plugin in requirejs

Question

I have jquery and jquery-cookie working together correctly below. I would like to make is so that jquery isn't global. Right now it is. Any method i've tried seems to break jquery-cookie.

require.config({
    paths: {
        "jquery": '../components/jquery/jquery',
        "jquery-cookie": "../components/jquery-cookie/jquery.cookie",
    },
    shim: {
        "jquery-cookie": {
            deps: ['jquery']
        }
    }
});

require(["jquery", "jquery-cookie"], function($) {
    console.log($().jquery); // 1.7.2
    console.log($.cookie("hello")); // null
});

The following changes will make jquery local and break cookie:

define("nc-jquery",['jquery'], function () {
    return jQuery.noConflict(true);
});

require(["nc-jquery", "jquery-cookie"], function($) {
    console.log($().jquery);
    console.log($.cookie("hello"));
});

explunit · Answer 1 · 2013-03-25T12:40:00.263

2

Both jquery and jquery-cookie are AMD compatible, so there is no need to do any shim config. As long as you have a path called 'jquery' defined (which you do), the jquery-cookie module will require it and load the dependency just fine without the global $. See this line in the jquery-cookie source code where it looks for a module called 'jquery':

if (typeof define === 'function' && define.amd) {
    // AMD. Register as anonymous module.
    define(['jquery'], factory);

And as as you showed in your original example, you can wrap jQuery as nc-query to eliminate the global $. The one additional thing you might need to do is create a 'map' entry for whatever library you want to automatically use it.

So then a modified version of your example would look something like this:

require.config({
    paths: {
        'jquery': '../components/jquery/jquery',
        'jquery-cookie': '../components/jquery-cookie/jquery.cookie'
    },
    map: {
        'jquery-cookie': { 'jquery': 'nc-jquery' }
    }
});

define('nc-jquery', ['jquery'], function (jq) {
    return jq.noConflict( true );
});

require(['nc-jquery', 'jquery-cookie'], function(myNonGlobaljQuery) {
    console.log(myNonGlobaljQuery().jquery);
    console.log(myNonGlobaljQuery.cookie("hello"));
});

It means that when jquery-cookie asks for 'jquery', you give it 'nc-jquery' instead. you can create as many of these as needed for whatever libraries you want to work this way. See the API docs for map.

edited Mar 25 '13 at 12:40

answered Mar 22 '13 at 18:47

explunit

18,967
6
69
94

If you have this run on a page and go to the console and check the value of `$` it's jQuery. So the code above is setting jQuery to global. – ThomasReggi Mar 22 '13 at 22:23
Thanks for sharing the map functionality I had no clue. Unfortunately, this isn't working here's the error https://gist.github.com/reggi/5239499 – ThomasReggi Mar 25 '13 at 18:42
@ThomasReggi What versions of jQuery and jQuery-UI? Can you post your current version as JSFiddle or gist? – explunit Mar 25 '13 at 18:47
here it is https://github.com/reggi/jquery-requirejs I hope you have bower installed XD – ThomasReggi Mar 26 '13 at 05:13
@ThomasReggi I downloaded your sample project and it ran fine for me. Can you repost the error you're getting (the line numbers in the gist above don't seem to correspond to the sample project you posted) – explunit Mar 26 '13 at 23:05
grrr http://i.imgur.com/eMhlnlq.png same-ish error! I feel like you're messing with me... This is impossible. – ThomasReggi Mar 27 '13 at 03:30
@ThomasReggi I'm not messing with you, but must confess yesterday I didn't have bower set up, so just manually pulled those files. Now that I have bower, I see the problem: I was pulling the jquery.cookie.js file from master carhartl/jquery-cookie but bower pulls the latest available **tag**, which does **not** include the AMD module wrapper snippet that I posted at the beginning of my answer. You can either pull that file yourself, or bug carhartl to make a new tag. What's confusing is that the source says 1.3.1 in both cases, but clearly the AMD support has been added in last two months. – explunit Mar 27 '13 at 12:54

ThomasReggi · Accepted Answer · 2013-03-22T16:10:05.850

I found that this works, I just don't think it's the best solution.

require(["jquery", "jquery-cookie"], function() {
    var $ = jQuery.noConflict(true);
    console.log($().jquery);
    console.log($.cookie("hello"));
});

My explanation of this code and why it works is as follows. jquery-cookie uses the $ in it's code and with this $ is global for just enough time for both jquery and cookie to load. I make it local with noConflict allowing $ usage within this require.

Stop global jquery with plugin in requirejs

2 Answers2

Linked