Sourcing jQuery from a CDN?

javascript jquery cdn requirejs

10,481

Solution 1

jQuery 1.7 registers itself as an AMD module by the name of 'jquery', so you need to create a mapping for 'jquery' using the paths config:

requirejs.config({
  paths: {
    'jquery' : 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min'
  }
});

require(['jquery'], function($) {
  //$ points to jQuery
});

Note however that RequireJS loads modules asynchronously and out of order, so if you have jQuery plugins you want to use that are not wrapped in define(['jquery'], function ($){ /* plugin code goes here */ }); calls, the plugin could execute before jQuery is loaded.

See the require-jquery project's README on ways to deal with files that depend on jQuery but do not wrap themselves in define() calls.

Solution 2

@jrburke's answer does not work for me. According to the RequireJS api doc, you should not include the file extension in the path. So here is the working code:

requirejs.config({
    paths: {
        'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min'
    }
});

require(['jquery'], function($) {
    //$ points to jQuery
});

I have a working example on jsfiddle: http://jsfiddle.net/murrayju/FdKTn/

Solution 3

You can include it as a dependency for a module but it's a little flakey. e.g

define([
"order!http://code.jquery.com/jquery-1.7.min.js"
], function($) {
})

It's not so good for 2 reasons

1) the jquery file itself isn't a module so the $ you get from the function won't be jquery

2) the order! plugin doesn't work well with CDN versions of scripts. See Requirejs' order does not work with priority config and CDN dependencies

I haven't had the chance to use this in a 'real' project yet because we haven't upgraded yet, but from my tests i've found that the best way is to include jquery in a script tag, then it works great as a dependency to your modules. Hopefully the following small sample will be helpful:

<html>
<head>
    <title>Index2</title>
    <script src="../../scripts/libraries/jquery.js" type="text/javascript"></script>
    <script src="../../scripts/libraries/require.js" type="text/javascript"></script>
    <script type="text/javascript"">

        require(
            {baseUrl: 'scripts'}, 
            ['jquery'], 
            function (dollarSign) {
                console.log(dollarSign('div').html('hi'));
            });       
    </script>

</head>
<body>
    <div>

    </div>
</body>
</html>

Solution 4

First of all, it's recommend use Protocol-relative URL for jQuery CDN. And second, use array in value with CDN and local places for load local file if CND is dead. You can use as many CDNs urls you want. Do not afraid, it dosn't want load second file from local place if successfully download it from CDN.

requirejs.config({
  paths: {
    'jquery': ['//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min', 'lib/jquery-1.10.2.min']
  }
});

View more solutions

10,481

Author by

wilsonpage

Follow Me on Twitter: @wilsonpage

Updated on June 02, 2022

Comments

wilsonpage about 2 years

I am using require JS and want to know the best method to use a CDN version of jQuery. I hear the 1.7 version is "AMD" which is supposed to help but can't find a straight example. Hope some RequireJS gurus can help me out.