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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s