browserify Using JQuery globally and in Module

Question

I have been given a template to work from by a client that has some 28 different jquery plugins that the client wants to use (e.g. ditching them not an option).

However I really want to use browserify to modularise my code, but short of trying to shim all 28 plugin and thir dependancy I can't work out how I would do that and not have to load JQuery for browserify and globally.

I tried doing this:

window.JQuery = require('jquery')
window.$ = window.JQuery

And this:

var globals = function(){
  window.JQuery = require('jquery')
  window.$ = window.JQuery
}

globals();

But neither seem to work and all the plugins throw an error. Does anyone now how I might make it work?

Answer 1

This is a pretty good way to do it, I think.

1. npm install jquery
2. npm install browserify-shim

3. Put this line in your package.json:

   browserify-shim" : {
     "./node_modules/jquery/dist/jquery.js" : "$"
   }
   

So on the server, your usual require('jquery') will point to the node_modules spot. When you run browserify, it will set window.$ to the same code (you could also use jQuery). Also, if you did want to shim those plugins, just add them like this:

    "browserify-shim" : {
      "./node_modules/jquery/dist/jquery.js" : "jQuery",
      "./plugins/bs_modal.js" :  { 
        "depends": [ "./node_modules/jquery/dist/jquery.js" ] 
      }
    }

or, cleaner:

    "browser" : {"jquery": "./node_modules/jquery/dist/jquery.js"},
    "browserify-shim" : {
      "jquery" : "jQuery",
      "./plugins/bs_modal.js" :  { 
        "depends": [ "jquery" ] 
      }
    }

Answer 2

I have been using the line below, to get bootstrap and jquery to be browserified:

window.$ = window.jQuery = require('jquery');