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?

chrki · Accepted Answer · 2019-01-09 20:46:42Z

3

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

npm install jquery
npm install browserify-shim

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

edited Jan 9, 2019 at 20:46

chrki

6,3436 gold badges39 silver badges60 bronze badges

answered Jun 24, 2014 at 1:39

user3242526

462 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pawel Over a year ago

And now how to use bs_modal.js plugin in for example Backbone.View ?

Ian Lim · Accepted Answer · 2014-06-25 23:38:36Z

0

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

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

answered Jun 25, 2014 at 23:38

Ian Lim

4,2943 gold badges34 silver badges44 bronze badges

1 Comment

Elise Chant Over a year ago

This is sort of the other way around. You are exposing internal jQuery to your window, instead of requiring window.jQuery inside your browserify world.

Collectives™ on Stack Overflow

browserify Using JQuery globally and in Module

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related