Problem

Migrate an existent RequireJS application to Browserify.

Objective

Have a new version of the previous AMD application running now with Browserify.

Migration Process

Here is my journey to migrate an existent AMD application to Browserify since I wanted to start using different frameworks with the initial problem I wanted to solve with my AMD application.

1. Create a new project with similar structure including a package.json file.

2. Install the required dependencies for my project:

• backbone
• underscore
• jQuery

• bootstrapSass
• browserify
• jasmine
• jstify

3. Replace all the RequireJS packages By CommonJS packages like this:

define(['backbone'], function(Backbone) {
  return {};
});

var Backbone = require('backbone');
module.exports = {};

4. Create a main.js file responsible to include all dependencies and some setup required to work with Backbone/JQuery.

var Backbone = require('backbone');
var $ = require('jquery');
Backbone.$ = $;

5. For the AMD application it was possible to load the controllers on demand, passed as configuration, but since browserify is not packaging any dependency that is explicitly required in the code, it is not going to work with the dynamic approach previously defined. Instead, it is required to define all my controllers in a file to be able to continue using my dynamic approach:

// Need to require the controllers
require('../app/controllers/about');
require('../app/controllers/contact');
require('../app/controllers/exception');
require('../app/controllers/home');

6. Include bootstrap SASS to be ready in the future to integrate additional styles and also to have more freedom about the final bundle.css file generated and destination.

7. Create the required node scripts to build the components for the application.

"scripts": {
  "create-dist": "mkdir -p dist",
  "clean-dist": "rm -rf dist",
  "copy-fonts": "cp -R node_modules/bootstrap-sass/assets/fonts/ dist/fonts",
  "build-js": "browserify src/app.js > dist/bundle.js",
  "build-css": "node-sass src/main.scss dist/css/bundle.css",
  "build": "npm run clean-dist && npm run create-dist && npm run build-js && npm run build-css && npm run copy-fonts"
}

Summary

The complete process of migrating the AMD application to Browserify took me around 4 hours since I am already using it at work, the most important challenges I found was to be able to continue using a dynamic approach to execute the controllers and keep away of a more advance build tool like grunt or gulp using just node scripts. At this time it is still pending the migration of the tests.