Skip to content

browserify shim recipes

Jump to bottom Edit New page
olsonpm edited this page Feb 5, 2015 · 9 revisions

Examples of how to configure browserify-shim for certain libraries or advanced browserify features

Setup browserify-shim

All recipes below assume that you installed and registered browserify-shim with browserify like so:

package.json

{
  "browserify": {
    "transform": [ "browserify-shim" ]
  },
  "dependencies": {
    "browserify-shim": "~3.2.0"
  }
}

Table of Contents generated with DocToc

jquery bundled

Note: the latest jquery can be installed from npm and needs no shimming

package.json

{
  "browser": {
    "jquery": "./js/vendor/jquery.js"
  },
  "browserify-shim": {
    "jquery": "$"
  }
}

Use it in your code

var $ = require('jquery');

THREE as global

package.json

{
 "browserify-shim": {
    "three": "global:THREE"
  }
}

index.html

<head>
  <meta charset=utf-8 />
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.min.js"></script>
</head>

Use it in your code

var THREE = require('three');

Ember which depends on handlebars and jquery

Note: the latest jquery and handlebars can be installed from npm and need no shimming

package.json

{
 "browser": {
    "jquery": "./vendor/jquery/jquery.js",
    "handlebars": "./vendor/handlebars/handlebars.js",
    "ember": "./vendor/ember/ember.js"
},
"browserify-shim": {
    "jquery": "$",
    "handlebars": "Handlebars",
    "ember": {
      "exports": "Ember",
      "depends": [
        "jquery:jQuery",
        "handlebars:Handlebars"
      ]
    }
  }
}

Use it in your code

var Ember = require('ember');

Angular which depends on jQuery + Angular modules installation via NPM and Napa

  • The napa field is used to install package without a package.json
  • The browser field is used to indicate browserify where the file resides when the main field does not exist in the package package.json, or when the package.json does not exist. It is also used by Browserify-shim to specify npm modules without CJS support. See here for an example
  • In the browserify-shim field, the packages export their name so that they can be directly required as a module dependency
  • ui-router does not need to be shimmed as it has a main field in its package.json, also it properly exports its name

package.json

{
  "dependencies": {
    "angular-ui-router": "^0.2.10",
    "jquery": "^2.1.1"
  },
  "napa": {
    "angular": "angular/bower-angular#v1.2.23",
    "angular-cookies": "angular/bower-angular-cookies#v1.2.23"
  },
  "devDependencies": {
    "napa": "^0.4.1"
  },
  "browser": {
    "angular": "./node_modules/angular/angular.js",
    "angular-cookies": "./node_modules/angular-cookies/angular-cookies.js"
  },
  "browserify": {
    "transform": ["browserify-shim"]
  },
  "browserify-shim": {
    "angular": {
      "depends": ["jquery:jQuery"]
    },
    "angular-cookies": {
      "depends": ["angular"],
      "exports": "angular.module('ngCookies').name"
    }
  }
}

app.js

var angular = require('angular');

angular.module('app', [
  require('angular-cookies'),
  require('angular-ui-router')
]);

browserify-shim and external bundles

package.json

{
 "browser": {
    "angular": "./vendor/angular/angular.js",
    "angular-resource": "./vendor/angular-resource/angular-resource.js"
},
"browserify-shim": {
    "angular": "angular",
    "angular-resource": {
      "exports": "angular.module('ngResource')",
      "depends": [
        "angular"
      ]
    }
  }
}

Use it in your code

module.exports = require('angular').module('app', [ require('angular-resource').name ]);

Bundling

Note: we need to set the alias in the expose field while bundling the libs, and use the alias when we bundle the app specific code.

browserify()
    .require(require.resolve('./vendor/angular/angular.js'), { expose: 'angular' })
    .require(require.resolve('./vendor/angular-resource/angular-resource.js'), { expose: 'angular-resource' })
    .bundle(function(err, libs) {
        fs.writeFile('./dist/libs.js', libs);
    });

browserify()
    .require(require.resolve('./app/main.js'))
    .external('angular')
    .external('angular-resource')
    .bundle(function(err, main) {
        fs.writeFile('./dist/main.js', main);
    });
Add a custom footer
Add a custom sidebar
Clone this wiki locally