Making javascript files include each other

Developing web-applications, I’ve never liked having to declare all the scripts I want the webpage to load in the HTML. In almost any other programming language I use, I declare the dependency of a file in that file: “include” for C++, “import” for Java, “require” for lua, etc.

For my WebGL project I’ve been using¬†requirejs, but for some reason it kept failing to load my scripts prior to the execution of my “main function” code. Also, I was declaring all the files I wanted requirejs to load in one place. I want a javascript file to state its own dependencies, rather than have a single script declare the dependencies for all the scripts. So I decided to investigate a little how hard it would be to emulate javascript dependencies in the webpage.

Turns out it was actually incredibly easy to do.

I declare a function called “include” which takes a script name (with relative path) and run a small piece of code that looks up a “entry script” that I declare in my index.html. I’ve named the script “include.js”.

snippet

This element loads the “include.js” script and tells it that the “scripts/main” script will be the “entry script”. Then I can go ahead and invoke “include” in my scripts every time one script needs the other. Once “include.js” has loaded all the scripts that were supposed to be, well, “included”; it looks for and invokes a “main” function. The script paths are relative, so I don’t have to worry about having to change my code in scripts where folders “higher up” are renamed. All in all, it’s working just as I hoped.


includejs-example

I put a copy of include.js here. But I’ll probably keep it maintained¬†here.