Allow global transforms with grunt browserify

Question

I've added jQuery as a script tag in my html file and have added it to package.json for working with browserify-shim as follows:

  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "jquery": "global:jQuery"
  },

I'm able to expose it in my main script file with a simple require('jquery') call.

The problem is that I'm using some jQuery plugins which internally do a require('jquery') and since browserify transforms don't apply to dependency of dependencies, it's causing browserify to complain with bundling since it cannot find jQuery.

Now I know that I can solve it by applying global-transforms by I cannot find a way to do it easily.

Browserify docs say that you cannot apply global-transforms in package file so the following don't work, (which I thought would):

  "browserify": {
    "global-transform": [
      "browserify-shim"
    ]
  },

  "browserify": {
    "transform": [
      "browserify-shim"
    ],
    "global": true
  },

I also tried adding the option to my Gruntfile.js as follows, but even that doesn't work:

browserify: {
        options: {
            global: true
        },
        dist: {
            files: {
                'js/bundle.js': 'js/script.js'
            }
        },
    },

The last option is to manually add a browserify-shim to every dependency's package.json, but I don't want to do it, since it means every time I add a new plugin, I would have to repeat the same process.

Any ideas to mitigate the above problem?

Answer 1

You should be able to apply global-transforms by providing transform with a hash option:

 "browserify": {
   "transform": [
     ["browserify-shim", {global: true}]
   ]
 }