npm & Browserify support added to Isotope, Packery, & Masonry

30 Nov 2014 · by David DeSandro

Isotope, Packery, Masonry, Draggabilly, and imagesLoaded all got big upgrades in the past weeks, adding npm and Browserify support. Now using these libraries with Browserify is as simple as a couple lines of code:

npm install isotope-layout
var Isotope = require('isotope-layout');

var iso = new Isotope( '#container', {
  // options...
});

Look over the specific docs for more details for each library.


Getting Browserify support meant adding CommonJS export to the libraries, and all to all their dependencies. I used the UMD spec, which has exports to support AMD, CommonJS, and browser globals. Here's Masonry's exports:

if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( [
      'outlayer/outlayer',
      'get-size/get-size'
    ],
    masonryDefinition );
} else if ( typeof exports === 'object' ) {
  // CommonJS
  module.exports = masonryDefinition(
    require('outlayer'),
    require('get-size')
  );
} else {
  // browser global
  window.Masonry = masonryDefinition(
    window.Outlayer,
    window.getSize
  );
}

Adding CommonJS support is a simple task, but getting it done required updating all those dependency libraries. So much code wrangling.

They're all up on npm and ready for Browserifying. Have at it!

Metafizzy socks

Metafizzy socks

Now for sale! Rainbow colors, cutie bear face, knit with comfy-soft cotton threads. Makes a great gift. Everyone wears socks.