Skip to content

browserify shim recipes

Jump to bottom Edit New page
Thorsten Lorenz edited this page Aug 25, 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');
Add a custom footer
Add a custom sidebar
Clone this wiki locally