"Cannot find module 'jquery'" - handling globals for JQuery and AngularJS in browserify with Gulp

Question

I've been trying to create a project that utilizes AngularJS, Browserify and Gulp for an excellent developer experience, one that produces a distributable 'module' (in Angular parlance). The idea being to have a self-documented project, like Angular Bootstrap, that also produces a consumable distribution for use in another application.

We've had great results with Gulp, but we're having trouble with browserify/browserify-shim. Also, unfortunately, most of the examples out there either don't use gulp, or use gulp-browserify, which has been blacklisted/ended.

We're including AngularJS and JQuery from Google CDN as <script> tags and have declared "angular" : "global:angular" and "jquery" : "global:$" in our browserify-shim config in package.json, but we're getting "cannot find module" when we try to user var angular = require('angular') and var $ = require('jquery') inside of our browserified-code (once it runs in the browser).

I've created a sample project that distills this down close to the minimum.

A sample repository of the code is available at

Once cloned, you would run 'npm install', then 'bower install', then 'gulp' from the root of the multi-browserify folder to generate the files and run the test server.

With gulp running, you can access the live HTML at http://:4000/gulp.html

Any help would be greatly appreciated - I'm wondering if we've come across a bug/issue with the intersection of gulp, browserify, vinyl-source-stream, etc, or more likely, we just don't quite get it yet.

Answer 1

Is retrieving your dependencies from a CDN a requirement? If not, you could use npm for your dependencies and let browserify magic them up for you.

JQuery and Angular are available via npm, so using jquery as an example you could just declare it in your package.json, like so:

  ...
  "dependencies": {
    "jquery": "^1.11.1"
  },
  ...

Alternatively, running npm install <package> -s from the directory containing your package.json will install the specified module and save it as a dependency in your package.json file.

Once you have installed this dependency (and any others you desire), you can go ahead and use them in your app.js as follows:

var $ = require('jquery');

$('<div>Hello World, I\'m using JQuery!</div>').appendTo('body');

Simple as that, and no need to use bower or browserify-shim - browserify will look through your node_modules folder and find them. I haven't tried this with angular (I had an issue trying to install it) - but it is available through npm, so it should work.