jQuery plugin when using Npm modules

Question

I'm new to Npm packages (coming from Ruby) and trying to load a jQuery plugin that's not necessarily on NPM. I'm building a Chrome extension. The code below is being used in the content.js script that's being injected in to the browser. So components like formatting and date pickers are desirable.

At the top of my app file, i have the following:

var React = require("react");
var $ = require("jquery");
var moment = require("moment");

All works fine, but now I want to add a plugin, and I'm not quite sure where to put it and how to get it accessible to the app. I've tried just loading it like:

var React = require("react");
var $ = require("jquery");
require("./jquery-datepicker");
var moment = require("moment");

That doesn't work becausae it can't find $ in the script. So then I tried:

require("./jquery-datepicker")($);

That didn't work either.

I clearly have no idea what I'm doing, but hoping this is easier than it appears.

Thanks!

Answer 1

I had the same issue and did this:

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

Making $ and jQuery global satisfies plugins that I simply use like this:

require('./jquery-datepicker');

In all other cases I avoid globals, but in the case of jQuery I think you are going against the grain if you don't. In case you are interested, I use browserify to use node style modules client side.