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!
How to use Plugins. To make a plug-in's methods available to us, we include plug-in file very similar to jQuery library file in the <head> of the document. We must ensure that it appears after the main jQuery source file, and before our custom JavaScript code.
js: We can use jQuery in Node. js using the jquery module. Note: Use the 'jquery' module not the 'jQuery' module as the latter is deprecated.
The name npm (Node Package Manager) stems from when npm first was created as a package manager for Node. js. All npm packages are defined in files called package. json. The content of package.
If you simply want to test out some NPM modules right inside your browser without setting up an entire app, you can use Browserify in three simple steps to use NPM modules. Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With