Example RequireJS + jQuery Project

Based on the original RequireJS + jQuery example by James Burke, the author of RequireJS.

About

AMD and RequireJS enable a more modular approach to code organization. This approach can present a significant initial learning investment. Using jQuery in your project can complicate things further if you have multiple contributors and/or vendor scripts injecting their own versions of jQuery into the page.

The goal of this project is to give those familiar with jQuery, but new to RequireJS, something to kick around. It's what I would have found helpful when I first starting working with RequireJS. It differs from James' original by:

• logs out explicit information when the modules factory executes (on the page and in the browser's console)
• organized using a mediator pattern
• removes jQuery from the global scope once it's loaded (via $.noConflict)
• externalizes the runtime configuration (require-config.js) from the build profile (require-profile.js) for easy reuse. This is advantageous because your runtime configuration will be dynamically loaded from one place instead of needing to be replicated in each mediator, or in a separate <script> tag your HTML page(s).

View the live demo.

Using the r.js Optimizer]

Requirements

• Install Node (which includes npm)
• Install the project's dependencies by executing npm install from the project's root directory

Instructions

From the root project directory, execute the following command in your terminal:

$ node_modules/requirejs/bin/r.js -o library/js/config/require-profile.js

Your build will be located as a sibling directory to your project and named "Example-RequireJS-jQuery-Project-build" (you can change this in require-profile.js).

Bonus: In the built version, you can update the script tag in "index.html" to use the Almond build script. Almond is a much smaller "shim" loader. If your built project doesn't need dynamic script loading, than this could be a much leaner and performant option.