Module loading in Javascript is still finnicky in 2015; here's a guide to making your life a little easier with the popular RequireJS library.

The creation and loading of Javascript modules  is still a headache-inducing chore in 2015. As time goes on, the non-evergreen [1] browsers of yore are becoming less common, meaning we’ll have to wait less for ES6 compatible browsers with native JS module support. But developing for the web is definitely a “here and now” situation, meaning until ES6 support is widespread, we still have to use hacky workarounds to get any form of module loading and dependency management in our browsers.

The most common module loader out there, RequireJS, is complicated to set up, to say the least. For a newbie to modular code like myself, who has no understanding of concepts like dependency injection [2], it’s incredibly daunting to look at the docs that RequireJS provides. I thought I’d keep it simple and show you how you can make use of  RequireJS’ modular loading, with a real world example of how I’ve used RequireJS on my website. I make use of three key Javascript libraries and my own custom code on my website, each with it’s own set of dependencies:

  • JQuery
  • ZURB Foundation - dependent on JQuery and Modernizr
  • TypedJS - dependent on JQuery
  • My configuration code - all of the above
Specifying, managing and updating these dependencies could be a difficult process, and whilst I could just pop them all in