bypassing umd in browserify

February 2017 ยท 2 minute read

umd + browserify = ๐Ÿ’”

$ npm install baddie --save
// baddie/index.js
(function (factory) {
  if (define && define.amd) {
    define(factory);
  } else if (typeof module != 'undefined' && typeof module.exports != 'undefined') {
    module.exports = factory;
  } else {
    window['meh'] = factory;
  }
})(function theModuleFactoryFn () {})

The above will not play ball in an environment that exposes define as a global.

deamdify to the rescue!

// baddie/index.js after deamdify
(function (factory) {
  if (true) {
    module.exports = factory;
  }
})(function theModuleFactoryFn () {})

as the author of the UMD package

The easiest way around this problem is to define a package-specific browserify transform inside the package.json of the baddie module.

{
  "name": "baddie",
  "browserify": {
    "transform": ["deamdify"]
  }
}

Whenever this package is consumed as part of a browserify build, the AMD bits will be stripped out and the package is safe. ๐ŸŽ‰

as a consumer of the UMD package

Submit a pull request to the package, or get a hold of viralify.

$ npm install viralify browserify deamdify baddie --save
# scripts/build
viralify . -t deamdify -p baddie > /dev/null &&
browserify my-entry-point.js -o out.js

viralify does the exact same thing; adds the given transforms to a browserify field in the target packages. ๐ŸŽ‰

You can now take your shiney fantastique browserify bundle and shove it into a requirejs environment, without UMD weeing on your parade.