Javascript Module Loaders

Javascript has a long history with so many changes over the years. One area that has so much improvements yet might still be so confusing is its support for modularization.

This blog post discusses a part of this area, specifically on how to your Javascript source files can be loaded into your application. This blog post also focuses on Javascript on browser instead of other native environment such as NodeJS.

First of all, let’s assume your web application has multiple files (or can be seen as modules) due to some benefits below:

• A gigantic module/file is very hard to read and understand.
• A gigantic module is hard to reuse.

In the next sections, I’ll go through some main ways to load your Javascript into a web page in a web browser.

Script tag

This is the first and most basic ways at the moment to load Javascript in browser (the other way is to call eval with a Javascript string):

<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script type="text/javascript" src="a_dependency.js"></script>
<script type="text/javascript" src="my_app_source.js"></script>

If you split your applications into multiple Javascript file, you’ll need a