Loading twitter bootstrap using browserify

Question

How do I use Twitter bootstrap in browserify? I installed bootstrap-browserify, and tried using this in my code

Later in my code, I have some code trying to patch the modal dialog function of bootstrap, but it throws an error.

This is how my code looks like:

var bootstrap = require('bootstrap-browserify');

$(document).ready(function () {

    $.fn.modal.Constructor.prototype.enforceFocus = function () {
        var that = this;
        $(document).on('focusin.modal', function (e) {
            if ($(e.target).hasClass('select2-input')) {
                return true;
            }

            if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
                that.$element.focus();
            }
        });
    };
}

I am completely new to browserify and I am using it for the first time. What am I doing wrong?

Answer 1

First you'll have to install Bootstrap, jQuery, and browserify-shim. I prefer to install these with Bower (because of the flat dependency structure) but you could also use NPM. This is the browserify-shim section of my package.json config:

  "browserify": {
    "transform": [
      "browserify-shim"
    ]   
  },  
  "browser": {
    "jquery": "./bower_components/jquery/dist/jquery.min.js",
    "bootstrap": "./bower_components/bootstrap/dist/js/bootstrap.min.js"
  },  
  "browserify-shim": {
    "jquery": "$",
    "bootstrap": {
      "depends": [
        "jquery: jQuery"
      ]   
    }   
  },  

The way I prefer to install Bootstrap (and its dependency jQuery) is to install these to the global scope. Therefore, somewhere in my code that will be "browserified" I'll put the following:

$ = jQuery = require('jquery');
require('bootstrap');

Note that I'm not using var here. This means that $, jQuery, and the necessary Bootstrap javascript will be available on the window object.