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 (eg 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

我一直在使用下面的行，以获得浏览器的bootstrap和jquery：

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