Using Browserify-shim to use jquery plugins depending on window.jQuery

Question

Using Browserify-shim to use jquery plugins depending on window.jQuery

I find it very difficult to wrap my head around Browserify-shim to achieve what I want. Doc seems pretty straight forward, but I'm missing something.

I'm trying to use jquery with var $ = require('jquery')

(which works fine on its own), but also for using random plugins that reference a global variable window.$

or window.jQuery

.

For example, here's the plugin I'm trying to use: https://github.com/jackmoore/zoom

It extends the object with $

additional methods and wraps itself in an IIFE, injecting window.jQuery like this:

(function($) {
// stuff
}(window.jQuery));

I use gulp to easily link my scripts using npm browserify

(not deprecated ( gulp-browserify

):

gulp.task('scripts', function(){
  return browserify('src/scripts/app.js')
    .bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('dist/scripts'));
});

And here's a loop through part of my file package.json

:

"browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "jquery": "$",
    "jquery-zoom": {
      "depends": ["jquery:jQuery"]
    }
  }

I need both jquery

and jquery-zoom

in the .js file:

var $ = require('jquery');
var zoom = require('jquery-zoom');

And the browser scroller diagnostic output looks pretty good:

$ BROWSERIFYSHIM_DIAGNOSTICS=1 browserify -d . -o dist/scripts/app.js

{ file: '/Users/clementoriol/web/browserify-test/src/scripts/app.js',
  info:
   { package_json: '/Users/clementoriol/web/browserify-test/package.json',
     packageDir: '/Users/clementoriol/web/browserify-test',
     shim: undefined,
     exposeGlobals: {},
     browser: undefined,
     'browserify-shim':
      { jquery: '$',
        'jquery-zoom': { depends: [ 'jquery:jQuery' ] } },
     dependencies:
      { jquery: '^2.1.4',
        'jquery-zoom': '^1.7.14' } },
  messages:
   [ 'Resolved "jquery" found in package.json to "/Users/clementoriol/web/browserify-test/jquery"',
     'Resolved "jquery-zoom" found in package.json to "/Users/clementoriol/web/browserify-test/jquery-zoom"',
     'Found depends "jquery" as an installed dependency of the package',
     { resolved:
        { '/Users/clementoriol/web/browserify-test/jquery': { exports: '$', depends: undefined },
          '/Users/clementoriol/web/browserify-test/jquery-zoom':
           { exports: null,
             depends: { jquery: 'jQuery' } } } } ] }