Menu
I would like to use requireJS and I am using jQuery. I don't want to use the combined version of requireJS and jQuery since I am not using the latest jQuery version. What is the best way for me to work with requireJS?
687
RequireJS can be initialized by passing the main configuration in the HTML template through the data-main attribute. It is used by RequireJS to know which module to load in your application. To include the Require. js file, you need to add the script tag in the html file.
RequireJS is a JavaScript file and module loader. It improves perceived page load times because it allows JavaScript to load in the background. In particular, it enables asynchronous JavaScript loading.
As per RequireJS API documentation, shim lets you. Configure the dependencies, exports, and custom initialization for older, traditional "browser globals" scripts that do not use define() to declare the dependencies and set a module value.
That is my exact question too! I also must use an older jQuery, but also more "traditional" javascript libraries. What is the best technique to do that? (I may edit your question to make it more broad if you don't mind.) Here is what I learned.
RequireJS author, James Burke, explained the advantages of the combined RequireJS + jQuery file. You get two things.
A module, jquery, is available, and it's the jQuery object. This is safe:
// My module depends on jQuery but what if $ was overwritten? define(["jquery"], function($) { // $ is guaranteed to be jQuery now */ }) jQuery is already loaded before any require() or define() stuff. All modules are guaranteed that jQuery is ready. You don't even need the require/order.js plugin since jQuery was basically hard-coded to load first.
To me, #2 isn't very helpful. Most real applications have many .js files that must load in the right order—sad but true. As soon as you need Sammy or Underscore.js, the combined RequireJS+jQuery file doesn't help.
My solution is to write simple RequireJS wrappers that load my traditional scripts using the "order" plugin.
Suppose my app has these components (by dependency).
In my mind, everything above that ends with .js is a "traditional" script. Everything without .js is a RequireJS plugin. The key is: high-level stuff (greatapp, my_sammy) are modules, and at deeper levels, it falls back to traditional .js files.
It all starts with a booter telling RequireJS how to start.
<html> <head> <script data-main="js/boot.js" src="js/require.js"></script> </head> </html> In js/boot.js I put only the config and how to start the application.
require( // The "paths" maps module names to actual places to fetch the file. // I made modules with simple names (jquery, sammy) that will do the hard work. { paths: { jquery: "require_jquery" , sammy : "require_sammy" } } // Next is the root module to run, which depends on everything else. , [ "greatapp" ] // Finally, start my app in whatever way it uses. , function(greatapp) { greatapp.start(); } ); In greatapp.js I have a normal looking module.
define(["jquery", "sammy"], function($, Sammy) { // At this point, jQuery and SammyJS are loaded successfully. // By depending on "jquery", the "require_jquery.js" file will run; same for sammy. // Those require_* files also pass jQuery and Sammy to here, so no more globals! var start = function() { $(document).ready(function() { $("body").html("Hello world!"); }) } return {"start":start}; } require_jquery.js:
define(["/custom/path/to/my/jquery.js?1.4.2"], function() { // Raw jQuery does not return anything, so return it explicitly here. return jQuery; }) require_sammy.js:
// These must be in order, so use the "order!" plugin. define([ "order!jquery" , "order!/path/to/custom/sammy/sammy-0.6.2-min.js" , "order!/path/to/custom/sammy/plugins/sammy.json-0.6.2-min.js" , "order!/path/to/custom/sammy/plugins/sammy.storage-0.6.2-min.js" , "order!/path/to/custom/sammy/plugins/sammy.mustache-0.6.2-min.js" ] , function($) { // Raw sammy does not return anything, so return it explicitly here. return $.sammy; } ); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
