multipage-requirejs-rjs

This project shows which javascript code is getting called when using requirejs for a multi-page setup with shim configuration.

• Shows how to use requirejs on a multi-page project with shim. Inspired from requirejs/example-multipage-shim
• Demonstrates loading multiple pages with a shared requirejs config.
• Demonstrates what parts of javascript is called when loading via console.log
• Shows example of using grunt & grunt-contrib-requirejs
• Grunt config to show how to avoid grunt.loadNpmTasks using grunt load-grunt-tasks.
• Show how to start two webserver connecting in dev mode and distribte mode to demonstrate requirejs loading before and after optimization.
• Example on running requirejs optimization through both grunt and through r.js using tools/build.js
• Extends multipage-shim example with html pages and javscript modules from different locations.

Getting Started

The project can be built and run with grunt. This example requires node and npm to setup rest of the components. package.json lists all the node modules needed. All these can be installed with npm command. bower.json describes all the javascript libraries used and can be automitically downloaded suing bower command. Finally gurnt command builds and starts the project.

• Clone this github repositoy or Download the zip here.
• make sure node, npm are installed and install grunt-cli & bower globally by running following commands

	npm install -g grunt-cli
	npm install -g bower

• Install node packages from package.json using npm

	npm install 

• Install javascript components from bower.json using bower

	bower install

• Start the project using grunt. This will do jshint on the javascript, optimize using grunt-requirejs and finally start web servers for webapp and webapp/dist folders.

	grunt --force start

If you notice any URL conflict when starting up servers, you can change the ports in Gruntfile.js in connect task.

Analyze script loading

Once you start up grunt, analyze how requiejs execution is happening by analyzing the chrome console.

• Access development mode pages using following urls
  • Dahboard page
  • Campaign module page
• Access optmized mode pages using following urls
  • Dahboard page
  • Campaign module page

Open these URLs in chorome with Developer Tools open. Chek the Network tab on which files are getting loaded in both dev & dist modes. Check the Console tab to see what parts of javascript is getting and in which order.

Resources

More information on requirejs: http://requirejs.org/docs/api.html

More information on requirejs optimizer: http://requirejs.org/docs/optimization.html

More information on npm: https://www.npmjs.org/doc/cli/npm.html

More information on bower configuration: http://bower.io/docs/config/

More information on grunt configuration: http://gruntjs.com/getting-started