Can I include another source file in JavaScript?

Question

I'm working on a large web application which is primarily driven by JavaScript on client side. I am still in prototyping phase and I am at a point where source files become very long and I would like to split it up into multiple files.

For example in PHP I would just call include('source.php') or require_once('source.php').

Is there a similar way to connect multiple source files in JavaScript? There are many large web applications with intense use of JavaScript out there, what is the common solution?

Answer 1

RequireJS is a popular solution to this requirement.

Answer 2

You could have a "includer.js" that will do nothing but include other JS files, like this:

includer.js

var files = ['someScript', 'anotherScript', 'moreScript']
for (var i = 0; i < files.length; i ++) {
    var scriptEl = document.createElement('script')
    scriptEl.src = files[i] + '.js'
    document.head.appendChild(scriptEl)
}

HTML

<script src="includer.js"></script>

Answer 3

I wrote a tool in Java specifically designed to manage large javascript codebases for web apps by detecting your dependencies and bundling your javascript, allowing you to just add and change files without worrying about which files to include and in what order (as long as you conform to a naming scheme and folder structure)

http://damonsmith.github.io/js-class-loader/

It works for non-java app projects too.