CODEWITHSUNDEEP
javascriptjquerybrowserify
DJ Forth
DJ Forth

Reputation: 1518

browserify Using JQuery globally and in Module

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?

Upvotes: 4

Views: 2850

Answers (2)

user3242526
user3242526

Reputation: 46

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" ] 
      }
    }

Upvotes: 3

Ian Lim
Ian Lim

Reputation: 4284

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

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

Upvotes: 0

Related Questions