Best way to package a JavaScript library that requires jQuery?

Question

I am writing a very basic JavaScript library that uses the $.ajax() function of jQuery.

How should I manage this dependency? Should I instruct users of my library to include jQuery themselves? Should I use something like RequireJS or script tag insertion to load jQuery within the library? If the latter would be better, how do I do this without causing a conflict if the user is already using jQuery?

I would require someone using your library to include jQuery on their own. It is common enough and it will highlight that they need to consider any incompatibilities within their own code. — Lee Meador, Apr 23 '13 at 18:22
I would suggest having your library throw an exception if jQuery isn't included and a method is used that requries jQuery. Bundling jQuery with it automatically can cause much worse headaches for situations where jQuery is already included than requiring them to include it themselves. — Kevin B, Apr 23 '13 at 18:22
If all your library needs is `$.ajax`, then just do your own XMLHttpRequests. I'm sorry, but it would be nuts to require jQuery just for XHR. — silly little me, Apr 23 '13 at 18:26
Consider to use a CDN to load jquery if jquery is not already loaded — A. Wolff, Apr 23 '13 at 18:32
@sillylittleme What would be the downside of requiring all of jQuery? From what I understand, most end users already have a cache of jQuery anyway. Are there other components of performance I need to think about? — John Karahalis, Apr 23 '13 at 18:43
@FallingPlates: Just too much download. jQuery users like to go around saying that everyone already "has" jQuery, but it's not nearly that simple. A browser's cache *might* have jQuery, but if it does, the question is which version? and from which CDN? There are *dozens* of versions of jQuery hosted by at least 3 major CDNs. The browser's cache is finite. At best, it's hit or miss. XHR is a very small part. If you don't want to do it yourself, I'd suggest finding a library that just does XHR, or that is at least modular, so you can load just the part(s) you need. — silly little me, Apr 23 '13 at 18:48
[_... the ideal use of jQuery with RequireJS is to load it as a module, since it registers as an AMD module._](https://github.com/jrburke/require-jquery#better-integrations) I agree with @sillylittleme on jQuery being overkill for your requirements, but if you do use it, take a look at that link which is a demo project from the author of RequireJS (using a concatenation of the two libraries into `require-jquery.js`). — c24w, Apr 24 '13 at 14:11

score 2 · Accepted Answer · answered Apr 23 '13 at 18:32

I think it kinda depends if you have more dependencies, other than jQuery.

If jQuery is your only dependency, and your library doesn't really need it's own module dependency system, I wouldn't recommend RequireJS. Just check for the existence of jQuery in your library, and throw an error otherwise.

If you're however looking to make an flexible and maintainable libary, I would recommand using some module loader (like RequireJS). This also gives you the advantage of using a build system which allows you to combine and pack your library

score 1 · Answer 2 · edited May 23 '17 at 11:57

1

I ended up writing my own function to fetch JSON data as silly little me recommended in the original post. Thanks to everyone who replied. The guidance on JavaScript library dependencies was very valuable, even though I went down this other route.

I used this Stack Overflow answer as a guide for writing my own function to fetch JSON. I needed to fetch the data synchronously, so I adjusted the function with the tips outlined in this other article.

In the end, my function looked like this. I hope it helps someone else who comes along.

var fetchJSON = function(path, callback) {
  var httpRequest = new XMLHttpRequest();
  httpRequest.open('GET', path, false);
  httpRequest.send();
  if (httpRequest.readyState === 4) {
    if (httpRequest.status === 200) {
      var data = JSON.parse(httpRequest.responseText);
      if (callback) callback(data);
    }
  }
}

edited May 23 '17 at 11:57

Community

1
1

answered Apr 23 '13 at 20:26

John Karahalis

3,369
2
15
20

Keep in mind that this won't work in older IE's if you need it too. – blockhead Apr 24 '13 at 19:43
Thanks for the feedback, @blockhead. What part breaks compatibility? The JSON.parse call? – John Karahalis Apr 24 '13 at 23:56
Just saw that my last question is answered in [the answer](http://stackoverflow.com/questions/14388452/how-do-i-load-a-json-object-from-a-file-with-ajax/14388512#14388512) I reference above. – John Karahalis Apr 25 '13 at 00:30

score 0 · Answer 3 · answered Apr 23 '13 at 18:22

0

I would recommend you to advice the users to include jquery first. If you let me choose any example, you will see that this is a really used approach (eg .net framework)

answered Apr 23 '13 at 18:22

Eric Frick

847
1
7
18

Best way to package a JavaScript library that requires jQuery?

3 Answers3