Skip to content

Instantly share code, notes, and snippets.

@admataz
Last active December 25, 2015 22:19
Show Gist options
  • Save admataz/7049201 to your computer and use it in GitHub Desktop.
Save admataz/7049201 to your computer and use it in GitHub Desktop.
Load a locally-scoped version of jquery using AMD/require.js - for when the existing site has an older version, and you need the more recent version for your modules. see http://requirejs.org/docs/jquery.html#noconflictmap.
//define a module that returns a noConflict version of jQuery
define(['jquery'], function (jq) {
return jq.noConflict( true );
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>local jquery scope with require.js</title>
<!-- here is the initial version of jquery -->
<script type="text/javascript" src="jquery-1.4.4.js"></script>
</head>
<body>
</body>
<!-- using require.js to to AMD loading -->
<script src="components/requirejs/require.js"></script>
<!--inline javascript for this example -->
<script type="text/javascript">
// configure paths and the map for require.js
require.config({
baseUrl: "/",
paths: {
"lib": "components",
"jquery": "components/jquery/jquery" //jquery registers itself when detecting AMD - but this is to be sure
},
map: {
'*': { 'jquery': 'jqp' }, // map all modules to the private jquery module
'jqp': { 'jquery': 'jquery' } // map the private jquery to the real jquery
}
});
//example module that requires jquery
require(['jquery'],function($){
// outputs the updated version
console.log($.fn.jquery); //2.0.3
});
//back in the global scope - outputs the old version
console.log($.fn.jquery); //1.4.4
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment