Skip to content

browserify shim recipes

Jump to bottom Edit New page
aymericbeaumet edited this page Sep 23, 2014 · 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
  • 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