How do I use main.js and plugins.js from HTML5 Boilerplate?

Question

There is a similar question that has an accepted answer, but the link it refers to is no longer available (not even on the wayback machine). The H5BP docs themselves are not very specific on this subject (here), at least not for a noob like me. And the answer to this similar question still doesn't explain much to me. It sort of touches on how to use plugins.js, but isn't very specific and doesn't explain main.js.

Unfortunately, these are the only bits of information I could find, and I still don't really understand what these files are for. So can anyone explain;

How do I use main.js and plugins.js from the HTML5 boilerplate?

What is their function, how would I use them?

Axenic

I kind of get that they're there for organisation purposes, but don't really know what you would do if you want to include and init a jquery plugin for example. Or how that would be different from doing this with a non-jquery plugin. Or what the difference is between main.js and plugins.js. – Axenic

From this question I sort of understand that your init scripts go in main.js, and you load any plugins from plugins.js. But I still don't really understand more than that. – Axenic

Also, from the require.js docs I can see that it also uses main.js, so it uses a similar structure. Although it doesn't seem to be using plugins.js, but instead seems to be doing all its initialization from main.js. – Axenic

The original H5BP docs give an explanation that is a little different; it says to put all plugin code in plugins.js, and to put all code you've written yourself in main.js. Which kind of contradicts the other sources.. For example this answer advises to put the initialization for plugins in main.js. – Axenic

This is another similar question, unfortunately without a conclusive answer.. (also this one) – Axenic

This question asks a similar question, but about the old version of H5BP. It seems that plugins.js can be used for all third party js (but it doesn't say in what way exactly). Main.js was probably called scripts.js earlier, in this post it is suggested to use it for anything you've written yourself. I don't know whether that would also include initialization scripts, and in what way your own scripts should be included.. – Axenic

Answer 1

It's just suggested organization.

The idea is to drop jQuery plugins you're using into plugins.js and (depending on the size of the site) do your work in main.js.

I wrote it up in detail in the Isboar standards docs (although that doc refers to scripts.js and not main.js)

What

Ah ok, and do the initialization scripts for the plugins from plugins.js also go in main.js? Or should they go in a separate file? – Axenic

Nice article by the way, very thorough! – Axenic

@Samuel yes. Using the example in the article you would initialize any plugins in the init function of your application or in page/module specific initialization. plugins.js was basically just for plugins to live in an orderly way. there isn't supposed to be any application code there. – What

Thanks man, very nice article. What do you suggest on the page/module specific initialization matter? Imagine I copy a minified version of Plugin in my #Plugins.js file and initialise that plugin on one page only(in my #Main.js ) but I get Reference Error in other pages. – Olympium

The simplest way to manage that for page to page sites is to simply initialize based on the id or class of the page itself. So it you need it on your home page, you could test for the presence of body#home and initialize then. The scheme is formalized in Paul's Dom Based Routing paulirish.com/2009/… – What

Answer 2

plugins.js is to put all your vendor scripts (not authored by you), in a single file. You may have tooltio.1.4.js or tablular.min.js or d3.vert.js - and instead of using all these JS files directly into HTML page, you copy paste all codes into plugins.js

Main.js is just a template file given to you for your own authored codes.

Gospodin

Answer 3

You should refer to h5bp's other repos'. Check this out https://github.com/h5bp/html5boilerplate.com/blob/master/src/js/main.js

Bystreet

Links to external resources are encouraged, but please add context around the link so your fellow users will have some idea what it is and why it’s there. Always quote the most relevant part of an important link, in case the target site is unreachable or goes permanently offline. – Poetics