title: Using Bootstrap 3.0 with Browserify
body: <p>I am trying to use Bootstrap 3.0 with Browserify 5.9.1, but getting the following error:</p>
  
  <pre><code>Uncaught ReferenceError: jQuery is not defined
  </code></pre>
  
  <p>What's the correct way to do this?</p>
  
  <p>Here are the relavant portions of my package.json:</p>
  
  <pre><code>{
    ...
    "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",
      ...
    },
    ...
  }
  </code></pre>
  
  <p>The module that requires bootstrap is shown below:</p>
  
  <pre><code>var $ = require('jquery');
  var Backbone = require('backbone');
  Backbone.$ = $;
  require('../../../../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap');
  </code></pre>
  
  <p>Two things that I don't like here are:</p>
  
  <ol>
  <li>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?</li>
  <li>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?</li>
  </ol>
  
  <p>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>
  
  <p>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.</p>