Tuesday, April 7, 2015

Browserify and Grunt using jQuery from a CDN

Below is a sample configuration in which jQuery, backbone, and underscore are all referenced externally so that they are not included in the browserify bundle. Notice also that there is a transform for underscore templates in the grunt config. The resulting bundle is built as a standalone so that the module can be instantiated by our clients.  You'll need to npm install browserify-shim and modify your package.json file.  After building this module your html page will also need to reference jQuery because the jQuery code will not be in the bundle.

  "name": "packageName",
  "version": "15.3.1",
  "devDependencies": {
    "browserify": "9.0.7",
    "browserify-shim": "3.8.3",
    "grunt": "0.4.5",
    "grunt-browserify": "3.6.0",
  "browser": {
    "jquery": "./app/js/lib/jquery-1.11.2.min.js",
    "backbone": "./app/js/lib/backbone-1.1.2.min.js",
    "underscore": "./app/js/lib/underscore-1.8.3.min.js"
  "browserify": {
    "transform": [ "browserify-shim" ]
  "browserify-shim": {
    "jquery": "global:$",
    "underscore": "global:_",
    "backbone": "global:Backbone"

gruntfile browserify options
    js: {
        src: ['app/js/main.js'],
        dest: 'app/js/company.modulename.js'
    options: {
        transform: ['node-underscorify'],
        browserifyOptions: {
            standalone: 'company.modulename'