jQuery plugins available for all modules?

I’m noticing that when requiring jQuery plugins, they are suddenly available to all modules. I’d expect the plugin function to only be available to the module which required this plugin.

I’ve got an example of this at my repo. I also explain the general setup below:

Let’s say you have a script, which requires two components:

// script.js
// requirements
var Component1 = require('./component-1');
var Component2 = require('./component-2');

$(function () {
    // initialise components
    new Component1();
    new Component2();
});

Each component looks very simple. The big difference is that Component 1 requires a plug-in; Component 2 does not.

//component-1.js
// call our fancy fade out plug-in
require('./fancy-fade-out');

module.exports = function () {
    $('#component-1').click(function () {
        $(this).fancyFadeOut();
    });
}
//component-2.js
module.exports = function () {
    $('#component-2').click(function () {
        $(this).fancyFadeOut();
    });
}

Lastly this is the fancy-fade-out plugin

//fancy-fade-out.js
(function ($) {
    $.fn.fancyFadeOut = function () {
        this.animate({marginLeft: '200'}, 2000)
            .fadeOut();
    }
}(jQuery));

I’d expect a click on #component-2 to result in an error. It is calling a function it hasn’t required. Yet for some reason no error occurs.

I think this is very misleading, as technically Component 2 has a bug, but this bug will only surface when Component 1 is absent.

So there are two questions:

  1. Do people agree this is an issue?
  2. How would I make sure that jQuery plugins are attached to the jquery within the module’s scope, and not beyond it?

Author: Fantashit

1 thought on “jQuery plugins available for all modules?

  1. That’s not a webpack issue at all ^^. jQuery plugins register themselves to a global namespace, which is bad practice, but not explicitly prohibited by CommonJS.

    But to be honest: Most jQuery plugins are poorly written and most of the time you’ll find better libraries without jQuery dependency.

Comments are closed.