How to import/include source files in JavaScript?

Question

Possible Duplicate:
How to include js file in another js file?

Suppose I have a few JavaScript source files: a.js, a1.js, and a2.js. Functions of a.js invoke functions from a1.js and a2.js.

Now I have to declare all these files in my HTML page. I would like to declare only a.js in the HTML and "import/include" a1.js, and a2.js in the a.js source file.

Does it make sense? Can I do that in JavaScript?

To do that you must use a tool like [require.js](http://requirejs.org/), or concatenate your js files (and minify them in the same move, for exemple using the [closure compiler](https://developers.google.com/closure/compiler/)). You can't specify imports in vanilla javascript. — Denys Séguret, Jun 28 '12 at 16:10
@dystroy Thanks for suggestion. Initially i was looking for an option to close. I did it now using the "flag" option. It was not intuitive for me... — 18bytes, Jun 28 '12 at 16:18
@devsundar sorry, I didn't see you didn't yet have the privilege to cast a vote to close. — Denys Séguret, Jun 28 '12 at 16:20

Denys Séguret · Accepted Answer · 2012-06-29T06:20:04.320

You can't specify imports in vanilla javascript.

So your solutions (excluding heavy server side frameworks) are :

simply do the imports
concatenate your js files (and minify them in the same move, for exemple using the closure compiler)
use a module itool like require.js

As long as you're not experienced, and if your number of files is low (less than 15), I recommend to simply choose the first or second solution. Using a module loader may have side effects you don't want to debug when beginning to learn javascript.

score 12 · Answer 2 · edited May 23 '17 at 12:26

12

You can import:

<script type="text/javascript"src="a1.js"></script>
<script type="text/javascript"src="a2.js"></script>
<script type="text/javascript"src="a3.js"></script>

if you want to do it directly from the JS, you may use Ajax, this post explains how to: include-javascript-file-inside-javascript-file

edited May 23 '17 at 12:26

Community

1
1

answered Jun 28 '12 at 16:20

Israelm

1,607
3
23
28

2

This doesn't help with importing a specific module from a library. – shinzou Jan 17 '17 at 08:15

score 2 · Answer 3 · answered Jun 28 '12 at 16:12

You can bundle JavaScript (and also CSS) files together using certain tools to reduce the number of files you must include. This also increases page load performance.

These tools combine multiple JavaScript files into a single JavaScript file (optionally minifying the files as well), and multiple CSS files into a single CSS file. This results in fewer HTTP connections from the browser to the server, so there are fewer things to be fetched serially.

ASP.Net MVC 4 has built-in support for this:

http://theshravan.net/bundling-and-minification-support-in-asp-net-mvc-4/

There are a number of solutions for other environments as well such as Juicer.

If you cannot bundle all resources (perhaps some come from a CDN while others are served locally), you can use a load manager such as require.js.

How to import/include source files in JavaScript?

3 Answers3