browserify shim recipes

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);
    });
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.