How to include sub-dependencies in a Bower repository

Question

I am creating a basic JS framework which I will be uploading to Github and hope to create a bower package so that I can install it in my other projects using Bower. I've never done this before but I could probably work that bit out.

The confusion comes with other dependencies which my Framework relies on. For example I want to specify Fastclick.js as a dependency and call it from within my framework like this.

window.addEventListener('load', function() {
    FastClick.attach(document.body);
}, false);

So my question is how am I supposed to do this? I assume I don't include the Fastclick library in my compiled "/dist" folder and that I can specify it in my Bower file so that when somebody installs my framework they will get the correct version of Fastclick? If that's the case then how do I make sure they load the library before my library? I don't have control over their HTML or the order in which they load scripts.

I could just copy and past the Fastclick code into my library, that is one option of course but I feel there must be a better way to do this. My brain is telling me that to do it properly would require some kind of JS module loading system though.

As you can tell. I don't really know what I'm talking about so apologies if the question is quite vague. Any help would be greatly appreciated though.

score 1 · Answer 1 · answered Jan 09 '16 at 14:03

Do a

bower install --save <library-name> // in your case Fastclick.

This will create a bower.json file, or update it with the library. It should also be saved now in bower_components/.

Now go to bower_components/<library-name> and see which file you want to include into your project. For example, from the bower.json of FastClick, it seems like you need to include lib/fastclick.js for the functionality.

So to use the library, in your project's index.html, you'll need to add a script tag something on the lines of:

<script src="bower_components/FastClick/lib/fastclick.js"></src>

Now you're done!

Anyone who clones your git repo simply has to do a bower install, and everything should work out of the box.

You don't need to checkin the bower_components folder, but only the bower.json file, which can be used to install all the dependencies.

Hope this helps!

Thanks for taking the time to reply. Unfortunately I don't have an index.html file as I am just making a JS file, so I don't have any control over the scripts loaded. I have been looking into whether some kind of module loading system would help me but it's complicated. — jonhobbs, Jan 09 '16 at 16:20

score 0 · Accepted Answer · answered Jan 19 '16 at 18:14

In the end I just included the whole Fastclick library in the code I was bundling up. It was the only way to ensure that it got loaded first in the final app. I could have just included it in the bower file and the final app would have needed to include it in their template in the right order, but this way seemed safer.

How to include sub-dependencies in a Bower repository

2 Answers2