Shimming dependencies of dependencies with browserify-shim

Question

I'm trying to refactor a library that uses Browserify by shimming certain modules out of the bundle using browserify-shim. Specifically, the library uses require("codemirror") but I want to provide a bundle that doesn't include CodeMirror but will rather use one that is provided via CDN.

So I've got browserify-shim config in my package.json like

  "browserify-shim": {
    "jquery": "global:jQuery",
    "codemirror": "global:CodeMirror"
  }

So far so good. require('jquery') and require('codemirror') have disappeared from the browserified bundle and been replaced by the expected code snippet to grab jQuery and CodeMirror off of the window object.

The library also requires some CodeMirror add-ons. For example require('codemirror/addon/hint/show-hint.js'). That's fine. I want that add-on bundled. However, within this add-on is a UMD wrapper that includes require("../../lib/codemirror"). Browserify is seeing this and is bundling the CodeMirror from /node_modules/codemirror/lib/codemirror.js because of this (I think). I want this to use window.CodeMirror as defined in the codemirror shim instead, but cannot figure it out. Have tried many variations including the following:

  "browserify-shim": {
    "jquery": "global:jQuery",
    "codemirror": "global:CodeMirror",
    "../../lib/codemirror": "global:CodeMirror",
    "codemirror/addon/hint/show-hint.js": { 
      "exports":null,
      "depends":["../../lib/codemirror:CodeMirror"]
    }
  }

That require("../../lib/codemirror") will not go away! I'm sure I'm missing something.

I'm running this from a Gulp script, but I don't think that should make any difference. Browserify version 3.38.1. Browserify-shim version 3.7.0.

Any ideas?

Answer 1

If you add browserify-shim with {global: true}, it should be applied to your dependencies' dependencies (and so on) as well, which should hopefully do what you want.

Assuming you're using raw browserify in your Gulpfile, instead of:

b.transform('browserify-shim');

do:

b.transform({global: true}, 'browserify-shim');

If you're using gulp-browserify, I'm not sure whether there's any way to specify global transforms.