title: How can I initialize a jQuery plugin (noUISlider) included via browserify-shim?
body: <h2>Greetings, Overfluvians!</h2>
  
  <p>I'm working on a Swiss Army build system (<a href="http://gulpjs.com" rel="nofollow">Gulp</a>, <a href="http://browserify.org/" rel="nofollow">Browserify</a>, <a href="http://bower.io" rel="nofollow">Bower</a>, <a href="http://www.browsersync.io/" rel="nofollow">BrowserSync</a>, <a href="https://github.com/OverZealous/run-sequence" rel="nofollow">RunSequence</a>, <a href="https://github.com/remy/nodemon" rel="nofollow">Nodemon</a>, and <a href="http://jquery.com/" rel="nofollow">jQuery</a>), but trying to get a jQuery plugin shimmed into the build and the DOM has me stumped.</p>
  
  <p>I've put together a sandbox repo if you'd like to quickly reproduce the issue for yourself:  <strong><a href="https://github.com/krry/demo-gulp-browserify-bower-jquery" rel="nofollow">gulp-browserify-bower-test</a></strong>. If you're a brave soul who builds apps in your head, please proceed.</p>
  
  <p>The issue I'm trying to resolve is: <strong><em>how do I properly shim or require jQuery</em></strong> so that dependencies are met without unneeded bloat in the distributed build?</p>
  
  <h2>Here are the relevant files and their relevant contents:</h2>
  
  <h3>1. The pre-browserified client-side script <code>bundle.js</code> that seeks to initialize the slider:</h3>
  
  <pre class="lang-js prettyprint-override"><code>var $ = require('jquery')
  
  var maskedinput = require('maskedinput')
  
  function maskInputs() {
    return $('input#zip').mask('99999')
  }
  maskInputs()
  
  var nouislider = require('nouislider')
  
  function initSlider() {
    return $('div#slider').noUISlider()
  }
  
  initSlider()
  </code></pre>
  
  <h3>2. A page <code>index.html</code> which contains the slider element to be initialized:</h3>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;NoUISlider Gulp Demo&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="nouislider"&gt;&lt;/div&gt;
      &lt;input type="tel" id="zip"&gt;
      &lt;script src="/dist/js/all.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h3>3. <code>bower.json</code> which brings in the jQuery and jQuery plugins</h3>
  
  <pre class="lang-json prettyprint-override"><code>"dependencies": {
    "jquery": "~2.1.1", // not sure if need jquery via bower or not
    "jquery.maskedinput": "~1.3.1",
    "nouislider": "~7.0.7"
  }
  </code></pre>
  
  <h3>4. <code>package.json</code> which witchcrafts the modules into browserify shims, setting their exported names and their dependencies:</h3>
  
  <pre class="lang-json prettyprint-override"><code>"browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browser": {
    "jquery": "./node_modules/jquery/dist/jquery.js",
    "maskedinput": "./bower_components/jquery.maskedinput/jquery.maskedinput.min.js",
    "nouislider": "./bower_components/nouislider/distribute/jquery.nouislider.all.min.js"
  },
  "browserify-shim": {
    "jquery": "global:jQuery",
    "maskedinput": {
      "exports": "maskedinput",
      "depends": [ "jquery:$" ]
    },
    "nouislider": {
      "exports": "nouislider",
      "depends": [ "jquery:$" ]
    }
  },
  "dependencies": {
    "jquery": "~2.1.1"
  },
  "devDependencies": {
    "browserify": "^5.11.0",
    "browserify-shim": "^3.6.0",
    "gulp": "^3.7.0",
    "vinyl-source-stream": "^1.0.0"
  }
  </code></pre>
  
  <p>I've tried using the bower version of jquery too, substituting this for the npm version in <code>package.json</code>:</p>
  
  <pre class="lang-json prettyprint-override"><code>==== try this ====
  "jquery": "./bower_components/jquery/lib/jquery.js",
  ==== or this ====
  "jquery": "./node_modules/jquery/dist/jquery.js",
  </code></pre>
  
  <h3>5. <code>gulpfile.js</code> which contains the browserify gulp task:</h3>
  
  <pre class="lang-js prettyprint-override"><code>var gulp = require('gulp')
  var browserify = require('browserify')
  var stream = require('vinyl-source-stream')
  
  gulp.task('browserify', function(){
    return browserify('bundle.js')
          .bundle()
          .pipe(stream('all.js'))
          .pipe(gulp.dest('./'))
  })
  
  gulp.task('default', ['browserify'])
  </code></pre>
  
  <h2>The roadblock</h2>
  
  <p>Note that I'm able to <code>require('maskedinput')</code> in my client-side js, but when I try to <code>require('nouislider')</code>, I see a console error that seems to say NoUISlider is not finding its jQuery dependency: <code>"Uncaught TypeError: Cannot read property 'fn' of undefined"</code> when trying to initialize the NoUISlider.</p>
  
  <p>Once again, here's the sandbox set up for easy reproduction of the issue:  <strong><a href="https://github.com/krry/demo-gulp-browserify-bower-jquery" rel="nofollow">gulp-browserify-bower-test</a></strong></p>
  
  <p>What gives? How should I be including jQuery and these plugins?</p>
  
  <p>Is there a better way to do this with either <code>bower</code> or <code>Browserify</code> but not both? I found several modules hosted on <code>npm</code> and <code>bower</code> where the build, module type, and general quality tended to vary, so I thought it wise to accommodate both package managers.</p>