title: Easy way to load custom javascript files on a webpage?
body: <p>I am working on a project where the Javascript is getting out of hand, so I've done my best to put each object into a different file (within reason of course... I sometimes group related objects and put them in one file if they are small).</p>
  
  <p>One thing I am honestly having trouble with is managing the dependencies of these objects. Javascript doesn't seem to ways to include/declare dependencies... and I am honestly finding this really very annoying.</p>
  
  <p>What's worse is that I have to put these dependencies into the separate html files which they are used. After including so many script tags at the bottom of so many pages, this has become an absolutely pain to manage. Here is an example:</p>
  
  <pre><code>&lt;script src="${base}/js/ui/autoCompleteWidget.js"&gt;&lt;/script&gt;
  &lt;script src="${base}/js/pagelet/addStudentToStudyGroupForm.js"&gt;&lt;/script&gt;
  &lt;script src="${base}/js/pagelet/studentListing.js"&gt;&lt;/script&gt;
  &lt;script src="${base}/js/pages/studyGroups.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>This is bad enough, because many of the first dependencies are declared over and over as they are needed on various pages. What is worse though is having to introduce 1 more dependency somewhere in the middle at a later point in time... and then having to go through my entire project and inject that one script tag over and over on each page where it is needed. Since there is no compile time warning on HTML markup... if I forget to do this on one page... the page simply won't work. Something like this is hard to automatically test and there's no way for me to know unless I check each page that uses Javascript.</p>
  
  <p>I was wondering... what is easiest/most painless way to load these scripts? Like, what is the standard way to do it that robust, easy to do, etc.?</p>
  
  <p>Thanks</p>