Javascript Builds with Require.js

Background

With the advent of complex client side applications, comes the need to be able to build and deploy these applications from your code base.  Require.js build  functionality offers this.  I will talk through a typical example of usage.

Installation

Please make sure you have node.js installed before you begin.  The next thing you need to do is to install require.js by running the following command:

npm install -g requirejs

Usage

Create a bash script to run the build

My preference is to create a build directory in your app directory as follows. Containing a bash script (.sh) file and the associated app.build.js file that has the app build options.

The file contains a command that runs the build using require js and a reference to your build file as follows:

r.js -o app/build/app.build.js

Create an app build file

The file contains the commands required for JS to pick up the require.js configuration and some other defaults for css build and directory locations as follows: 

({

appDir: "../",

baseUrl: "scripts",

dir: "../../dist",

mainConfigFile: "../scripts/main.js",

name: "main",

optimizeCss: "standard"

})

• The appDir directive status where the main app directory is, in our case it is on directory up from the file.
• the baseUrl is the url for our scripts.
• The dir is the location for the completed build
• mainConfigFile is the location of our require.js settings
• name: the main entry point of the appllication
• optimizeCss is an extra option defining how to optimize any css

Cleaning Up

As part of the build you can add deletions to your bash scripts to make sure your distribution or dist directory is easy to deploy.

This can be done by specifying remove bash script commands as follows:

cd dist
rm -rf build build.txt .bowerrc component.json scripts/views scripts/vendor/backbone-amd scripts/vendor/jquery scripts/vendor/roundabout scripts/vendor/threedubmedia scripts/vendor/underscore-amd/docs scripts/vendor/underscore-amd
rm -rf scripts/vendor/requirejs/dist scripts/vendor/requirejs/docs scripts/vendor/requirejs/tests
rm -rf scripts/vendor/requirejs/.gitignore scripts/vendor/requirejs/component.json scripts/vendor/requirejs/index.html scripts/vendor/requirejs/.gitignore scripts/vendor/requirejs/component.json scripts/vendor/requirejs/LICENSE
rm -rf scripts/vendor/requirejs/package.json scripts/vendor/requirejs/README.md scripts/vendor/requirejs/tasks.txt scripts/vendor/requirejs/testBaseUrl.js scripts/vendor/requirejs/updatesubs.sh

Summary

Using require.js is a good way of keeping your javascript releases optimized and clean.  Have a go and enjoy :-)