Using Bootstrap 3.0 with Browserify

Question

I am trying to use Bootstrap 3.0 with Browserify 5.9.1, but getting the following error:

Uncaught ReferenceError: jQuery is not defined

What's the correct way to do this?

Here are the relavant portions of my package.json:

{
  ...
  "scripts": {
    "bundle": "browserify main.js -o bundle.js --debug --list"
  },
  "dependencies": {
    "backbone": "~1.1.x",
    "jquery": "~2.1.x",
    "underscore": "~1.6.x"
  },
  "devDependencies": {
    "browserify": "^5.9.1",
    ...
  },
  ...
}

The module that requires bootstrap is shown below:

var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;
require('../../../../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap');

Two things that I don't like here are:

1. Bootstrap is downloaded using Bower. AFAIK there is no way to get it using npm. This makes the path very long and awkward. Is there a way to make Bootstrap npm friendly?
2. Bootstrap is not a direct dependency of this module, it is sort of a jQuery plugin. When it is loaded, it simply creates some event handlers on the document to handle events from Bootstarp's widgets. I have to require just so that these event handlers are created. Is this the right way?

Of course after all this, I still get the "jQuery is not defined" error. I am pulling my hair out trying to get this to work. Please help!

P.S. Earlier I had the grunt-browserify plugin in the picture and quickly realized that it was using browserify version 4.x with no source map capability. This was making it even harder to debug, so I quickly took it out of the picture and running browserify straight from npm.

Answer 1

This works for me when I'm using bootstrap in browserify:

window.$ = window.jQuery = require('jquery')
var Backbone = require('backbone');
Backbone.$ = $;
require('../../../../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap');