Loading a jQuery plugin with CommonJS

Question

I'm trying to use Webpack to bring in JS modules, including jQuery and a jQuery plugin. I can load jQuery in without any problem, but when I try to load in a plugin to use along with it, I get a jQuery is not defined error in my browser console. I'm pretty new to Common JS and Webpack so any help would be really appreciated.

Here's my code so far:

var $ = require('../../../../../bower_components/jquery/dist/jquery.js');
require('../../../../../bower_components/jquery.uniform/jquery.uniform.js');

module.exports = function(){
    function init(){
        $('select, checkbox').uniform();
    }

    return {
        init: init
    };
}();

It's at the end of the jquery.uniform.js file that I get the error I mentioned above, because it references jQuery, which for some reason is not yet defined.

(function (wind, $, undef) {
    ...
    ...
}(this, jQuery));

Any ideas how to make this work? Or am I doing this completely wrong?

Answer 1

I think you may want to give it a go through npm. Set up a package.json dep like this:

"uniform": "pixelmatrix/uniform#v2.1.2",

Also make sure jquery is within your project (ie. npm i jquery --save).

After these steps you could try an import like this:

var uniform = require('imports?$=jquery!uniform/jquery.uniform');

You should be able to push the nasty looking import to Webpack configuration provided this works. I hope this helps!