"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.

Solution

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.

Comments

[devdavid]

I don't see how this is an answer to the question. The question very clearly describes a specific scenario and problem with it. This answer ignores the scenario completely.

[goodforenergy]

I didn't ignore the scenario, but rather provided an alternative way of achieving what I believed to be their ultimate goal (being able to use JQuery) in a different way that they may not have considered. This approach would mean no need for browserify-shim, thus it would (albeit indirectly) solve their problem.

[devdavid]

The whole point of the question is to use jQuery and Angular from a CDN, but be able to require them during development as usual. Thus, suggesting to bundle it with them rest of the project's JavaScript is totally avoiding the question.

[Vix]

I was unaware that browserify looked through npm package.json, this tip has just saved me a considerable amount of headache! +1