In version ECMAScript 5 of javascript, Browserify/CommonJS helps bring the module concept to Javascript language as well as browser support. Normally, when doing Browerify, it starts from an entry file and creates bundles following the calling path of require(), which also includes the external libraries, such as AngularJS, ReactJS, etc. And every time when we have some code changes to our own app code, it has to run again to create this big bundle.

What if we can separate the libraries as one bundle and create another bundle for our app code? So that we can avoid the constant bundling on those “unchanged” libraries. And it should also benefit our debugging process.

And, here is how.

b.require(file, opts) and b.external(file)

In order to make multiple bundles working together, we have to deal with the interface between each two of them – making sure “bundle A” knows to find “bundle B” when it requires some module from “bundle B”. And this is achieved by b.require(file, opts) and b.external(file).

  • With b.require(file, opts), a bundle can declare the visibility of the module so that an outside bundle can use it by require('module').
  • With b.external(file), a bundle can declare the reference to certain module but not include it into the current bundle.

Check Browserify’s Github page for more details.

Browserify + Gulp + Angular

Usually we use Gulp + Browserify to help build the bundle while building the app, and the modules that Browserify reads are from NPM. However, when doing AngularJS, it may not be the case that all Angular modules are available from NPM. Here, we need to use the ModeJS modules napa and browserify-shim to help load these modules to NPM path and then be loaded by Browserify process.

Angular and its core modules are now available on NPM!

  • browserify-shim – Help make CommonJS-incompatible modules (like Ionic) browserifyable. By doing this, we can then use require('ionic') to load Ionic framework inside the code.
  • napa – A helper for installing repos without a package.json with npm. This is also used to import some Angular module as node module so that they can be bundled with Browserify.

napa + browserify-shim

Here is an example of configuration inside package.json:

"devDependencies": {
  ...
  "browserify": "^11.0.1",
  "browserify-shim": "^3.8.8"
},
"scripts": {
  "install": "napa"
},
"napa": {
  "ionic": "driftyco/ionic-bower#v1.2.4",
  "ionic-angular": "./node_modules/ionic/js/ionic-angular.js"
},
"browser": {
  "ionic": "./node_modules/ionic/js/ionic.js"
},
"browserify": {
  "transform": [
    "browserify-shim"
  ]
},
"browserify-shim": {
  "ionic": "ionic",
  "ionic-angular": "ionic-angular"
}

As shown,

  • In napa section, add the package that you need to include it into NPM. For example, add a package named ionic.
  • In browser section, specify the alias for each package.
  • In browserify-shim section, add alias:export pair. And the part of export is the name that require() calls.
  • In browserify section, register browserify-shim as a transform with browserify.

Check browserify-shi‘s NPM page for more usage details.

Browserify in Gulp Task

With the setup in package.json, now we have the list of modules that represent the libraries, such as:

libs : [
    'angular',
    'ionic',
    'angular-ui-router',
    'angular-sanitize',
    'angular-animate',
    'ionic-angular'
    ]

In the Gulp task, we will need two browserify processes: one for libraries and one for app code.

browserify()
    .require(libs)
    .bundle(function(err, libs) {
        fs.writeFile('./dist/libs.js', libs);
    });

browserify({
    entries: './app/main.js'
})
    .external(libs)
    .bundle(function(err, main) {
        fs.writeFile('./dist/main.js', main);
    });

Check browserify-shi‘s Github page for more usage examples.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>