javascripttwitter-bootstrap-3browserifybrowserify-shim

Browserify with twitter bootstrap


There are many similar questions including answers here on stack overflow, but none of them have worked for me, so here I am asking you guys. I appreciate everyone's time.

I recently started using gulp with browserify, and that works great. I then tried to use browserify for the front-end using: Backbone and Bootstrap3.

things are appearing to work, until I try to require the js file that comes with Bootstrap. I get an error in my chrome tools stating: jQuery is undefined.

I have attempted to shim it in, but I am very confused by the shim. I am using jQuery 2.1.1, so I should not need to shim jQuery, but it exists in the shim now, as I was desperate and trying everything. Here is my package.json and my main.js file:

--------------package.json------------------

{
  "name": "gulp-backbone",
  "version": "0.0.0",
  "description": "Gulp Backbone Bootstrap",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Rob Luton",
  "license": "ISC",


  "devDependencies": {
    "jquery": "^2.1.1",
    "backbone": "^1.1.2",
    "browserify": "^4.2.1",
    "gulp": "^3.8.6",
    "vinyl-source-stream": "^0.1.1",
    "gulp-sass": "^0.7.2",
    "gulp-connect": "^2.0.6",
    "bootstrap-sass": "^3.2.0",
    "browserify-shim": "^3.6.0"
  },

  "browser": {
    "bootstrap": "./node_modules/bootstrap-sass/assets/javascripts/bootstrap.js",
    "jQuery": "./node_modules/jquery/dist/jquery.min.js"
  },

  "browserify": {
    "transform": ["browserify-shim"]
  },

  "browserify-shim": {
    "jquery": "global:jQuery", 
    "bootstrap": {
      "depends": [
        "jQuery"
      ]
    }
  }
}

------------------------- main.js ----------------------

var shim = require('browserify-shim');
$ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;
var bootstrap = require('bootstrap');

/* the following logs fine if I comment out the bootstrap require, otherwise I get 'jQuery undefined' */

console.log(Backbone);
$(function() {
    alert('jquery works');
});

Solution

  • You shouldn't need to shim jquery that way if you've installed it with npm. The following works for a project I've been writing:

    I've also learned that using npm for bootstrap is kind of a PITA. I've been using bower to install and maintain certain front-end components when they need to be shimmed like this.

    package.json:

    {
      "name": "...",
      "version": "0.0.1",
      "description": "...",
      "repository": {
        "type": "git",
        "url": "..."
      },
      "browser": {
        "d3js": "./bower_components/d3/d3.min.js",
        "select2": "./bower_components/select2/select2.min.js",
        "nvd3js": "./bower_components/nvd3/nv.d3.min.js",
        "bootstrap": "./node_modules/bootstrap/dist/js/bootstrap.js"
      },
      "browserify": {
        "transform": [
          "browserify-shim",
          "hbsfy"
        ]
      },
      "browserify-shim": {
        "d3js": {
          "exports": "d3",
          "depends": [
            "jquery:$"
          ]
        },
        "bootstrap": {
          "depends": [
            "jquery:jQuery"
          ]
        },
        "select2": {
          "exports": null,
          "depends": [
            "jquery:$"
          ]
        },
        "nvd3js": {
          "exports": "nv",
          "depends": [
            "jquery:$",
            "d3js:d3"
          ]
        }
      },
      "devDependencies": {
        "browserify-shim": "~3.4.1",
        "browserify": "~3.36.0",
        "coffeeify": "~0.6.0",
        "connect": "~2.14.3",
        "gulp-changed": "~0.3.0",
        "gulp-imagemin": "~0.1.5",
        "gulp-notify": "~1.2.4",
        "gulp-open": "~0.2.8",
        "gulp": "~3.6.0",
        "hbsfy": "~1.3.2",
        "vinyl-source-stream": "~0.1.1",
        "gulp-less": "~1.2.3",
        "bower": "~1.3.3",
        "cssify": "~0.5.1",
        "gulp-awspublish": "0.0.16",
        "gulp-util": "~2.2.14",
        "gulp-rename": "~1.2.0",
        "gulp-s3": "git+ssh://git@github.com/nkostelnik/gulp-s3.git",
        "gulp-clean": "~0.2.4",
        "process": "~0.7.0"
      },
      "dependencies": {
        "backbone": "~1.1.2",
        "jquery": "~2.1.0",
        "lodash": "~2.4.1",
        "d3": "~3.4.8",
        "rickshaw": "~1.4.6",
        "datejs": "~1.0.0-beta",
        "moment": "~2.7.0"
      }
    }
    

    js:

    $ = jQuery = require('jquery');
    var _ = require('lodash');
    var Rickshaw = require('rickshaw');
    var d3 = require('d3js');
    var nvd3 = require('nvd3js');
    var moment = require('moment');
    require('datejs');
    require('select2');
    
    var bootstrap = require('bootstrap');
    console.log(bootstrap)
    

    Also - one sometimes useful thing is to have browserify-shim output its diagnostics. This is what my browserify.js task looks like:

    var browserify   = require('browserify');
    var gulp         = require('gulp');
    var handleErrors = require('../util/handleErrors');
    var source       = require('vinyl-source-stream');
    var process      = require('process');
    
    process.env.BROWSERIFYSHIM_DIAGNOSTICS=1;
    
    var hbsfy = require('hbsfy').configure({
      extensions: ['html']
    });
    
    gulp.task('browserify', ['images', 'less'], function(){
        return browserify({
          transform: ['hbsfy', 'cssify'],
                entries: ['./src/javascript/app.js'],
            })
            .bundle({debug: true})
            .on('error', handleErrors)
            .pipe(source('app.js'))
            .pipe(gulp.dest('./build/'));
    });