jquerytwitter-bootstrapbrowserifybrowserify-shim

Browserify-shim does not resolve dependencies


I want to combine bootstrap.js & jquery.js (both installed with npm) into vendors.js file but still be able to use jquery by calling require('$'). So I created gulp task:

'use strict';

var gulp = require('gulp'), 
helpers = require('./../utilities/gulp-helpers'),
source = require('vinyl-source-stream'),
plumber = require('gulp-plumber'),
browserifyShim = require('browserify-shim'),
browserify = require('browserify');

gulp.task('bulld-frontend:vendors', function(done) {
 var build = browserify({
  entries: [
  'jquery',
  'bootstrap'
  ]
});

 build
 .transform(browserifyShim)
 .require('jquery')
 .bundle()
 .pipe(source('vendors.js'))
 .pipe(gulp.dest('build/public/js'))
 .pipe(plumber({
  errorHandler: helpers.logError
}));

 done();
});

then added configuration to package.json

"browser": {
    "bootstrap": "./node_modules/bootstrap/dist/js/bootstrap.js",
    "jquery": "./node_modules/jquery/dist/jquery.js"
  },
  "browserify-shim": "./gulp/utilities/shim-config.js",
}, 

and finally configure my shims in gulp/utilities/shim-config.js

'use strict';

module.exports = {
  'jquery'    :  '$',
  'bootstrap' :  { 'depends': { 'jquery': 'jQuery'} }
};

but after running task I receive file, where bootstrap goes prior to jquery, so it throws Uncaught Error: Bootstrap's JavaScript requires jQuery

I added

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

to package.json but it didn't help. It seems to me, that browserify never applies this transformation, because if I replace .transform(browserifyShim) with .transform(function() { throw new Error("OLOLO"); }) task is still working.


Solution

  • I used browserify and shims in wrong way.

    Fist, .transform(browserifyShim) is not needed and this is wrong syntax to call transformations from code at all.

    Second, transformation is working fine, all I needed were just create vendors.js file and require bootstrap in it with require('bootstrap'). Then specify vendors.js as entry point of bulld-frontend:vendors task:

    var build = browserify({
      basedir: 'sources/client/js'
      entries: [
      './vendors.js'
      ]
    });
    

    and it is working.