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!

Are you developing client-side code or server-side code? If you're developing server-side code, what are you trying to do with jQuery and a jQuery date-picker plugin? You probably need to back up and explain what you're actually trying to accomplish at a higher level. — jfriend00
– jfriend00, Commented Sep 22, 2014 at 15:25
Client-side. It's the content.js script for a chrome extension. — brandonhilkert
– brandonhilkert, Commented Sep 22, 2014 at 15:48

James · Accepted Answer · 2015-04-30 13:36:15Z

10

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.

edited Apr 30, 2015 at 13:36

answered Sep 22, 2014 at 16:11

James

6,1932 gold badges36 silver badges48 bronze badges

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

1 Comment

Dimitri van der Vliet Over a year ago

window.$ = window.jQuery = require('jquery'); if you want to do it in a single line.

Collectives™ on Stack Overflow

jQuery plugin when using Npm modules

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related