Question

34

Browserify with twitter bootstrap

rated 0 times [ 36] [ 2] / answers: 1 / hits: 24625 / 10 Years ago, fri, july 18, 2014, 12:00:00

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');

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

hadens

Add To Favorites

Follow

Total Points: 142

Total Questions: 98

Total Answers: 100

Location: Kenya

Member since Mon, Jun 14, 2021

3 Years ago

answered 10 Years ago monetm · Accepted Answer

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://[email protected]/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/'));

});