Prevent bundling jQuery as a dependency with Browserify

Question

So I have been searching all over the internet to try to find a solution to this problem but I cannot find a solution that works. I'm currently using the latest version of Gulp and Browserify to bundle up JS for the website I'm working on. We previously would concatenate all the JS files together, but I'm moving to a module setup now.

The problem I am running into is duplicating certain dependencies, in this example, I'll focus on jQuery (v2.1.4). Here is my setup:

main.js (Loaded on every page)

window.jQuery = window.$ = require('jquery');
window.Vue = require('vue');    
require('jquery-validation');

// More JS that loads on all pages

page.js (Each page has it's own js file for scripts relating to that page)

require('remodal'); // This requires jQuery

// Rest of the JS for this page...

The problem I am running into is that now jQuery is in both javascript bundles. With Browserify, I marked jQuery as "external" for page-speicific.js which removed jQuery from the script, but I get an error Uncaught Error: Cannot find module 'jquery' and I cannot seem to find a solution to this.

If I "exclude" jQuery with Browserify, or if I put a try block around the require('remodal'), I end up with Uncaught TypeError: $(...).remodal is not a function instead. I'm guessing since the module remodal requires jQuery and it's not loaded there, it's not seeing it's set to the window and that's why execution fails?

http://stackoverflow.com/questions/32746512/what-is-the-difference-between-browserify-external-vs-exclude — Aluan Haddad, May 14 '17 at 05:55
I get the same error for exclude or external: Uncaught Error: Cannot find module 'jquery'. If I use ignore, I get an error that $.map is not a function, so it's not interpreting $ as jQuery. — Devin, May 14 '17 at 06:10

score 1 · Answer 1 · edited May 23 '17 at 12:26

Well, found the answer to my question. Guess a night of rest was all I needed to be able to think clearer to search for an answer.

I checked out browserify-shim (and browserify-global-shim) at some point, but found that it would only shim top-level dependencies. If jQuery was a dependency of a dependency, this would not work. Well, once I found the answer linked below, I discovered that theres an undocumented (at least, I never found it) { global: true } you can set to have the shim propagate to all dependencies.

var b = browserify();
var globalShim = require('browserify-global-shim').configure({
    'jquery': '$'
});
b.transform({ global: true }, globalShim);

After running gulp, all of my page-specific scripts now referenced jQuery as a window variable.

!(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(['jquery'], function($) {
      return factory(root, $);
    });
  } else if (typeof exports === 'object') {
    factory(root, (window.$)); // <----------------- :D
  } else {
    factory(root, root.jQuery || root.Zepto);
  }
})(this, function(global, $) {

Source: Shimming dependencies of dependencies with browserify-shim

Prevent bundling jQuery as a dependency with Browserify

1 Answers1