How do you import multiple javascript files in HTML index file without the bloat?

Question

Is there anyway of importing multiple javascript files in HTML without having to specify each file?

<script src="js/toolkit/Toolkit.js"></script>
<script src="js/toolkit/Viewable.js"></script>
<script src="js/toolkit/Overlay.js"></script>

ie. can I specify something like js/toolkit/* ?

I have 50+ javascript files that i have to import, and to specify each file seems very time consuming.

Concat and minify the files on the server and import then at once like `` — techfoobar, Jan 22 '13 at 13:58
You could add only one script which imports dynamically all the scripts. — Alex Filipovici, Jan 22 '13 at 13:58
Take a look at this: http://stackoverflow.com/questions/950087/include-javascript-file-inside-javascript-file — Sean Airey, Jan 22 '13 at 14:00
This needs to be done server-side. Take a look at this: https://developers.google.com/closure/compiler/ — frenchie, Jan 22 '13 at 14:01

score 18 · Answer 1 · edited Apr 27 '16 at 20:56

Including a JavaScript file in another JavaScript file is common in web development.

Because many times we include the JavaScript file at run time on the behalf of some conditions.

So, we can achieve this using JavaScript as well as using jQuery.

Method 1: Use JavaScript to include another JavaScript file

Add the following function in your web page.

function loadScript(url)
{    
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    head.appendChild(script);
}

just call the below loadScript function, where you want to include the js file.
```
loadScript('/js/jquery-1.7.min.js');
```

Method 2: Use jQuery to include another JavaScript file.

Add jQuery File in your webpage.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

Just call the getScript function functions.

jQuery(document).ready(function(){
    $.getScript('/js/jquery-1.7.min.js');
});

How to include a JavaScript file in another JavaScript File

Binary Brain · Accepted Answer · 2014-11-27T00:50:59.013

13

There's a way:

You can create a javascript function that takes the path as a parameter and creates these HTML lines:

<script src="js/toolkit/Toolkit.js"></script>
<script src="js/toolkit/Viewable.js"></script>
<script src="js/toolkit/Overlay.js"></script>

And you'll just have to call this:

loadLib("toolkit/Toolkit");
loadLib("toolkit/Viewable");
loadLib("toolkit/Overlay");

But this is not recommended because the load time will be increased due to the number of HTTP requests. You should better use something in the server side to put everything in the same file.

edited Nov 27 '14 at 00:50

answered Jan 22 '13 at 14:14

Binary Brain

1,170
8
20

1

I think this is the best answer. It may increase load time, but if a website takes 300ms to load instead of 3ms then its not a big deal. – Oliver Watkins Jul 22 '15 at 06:55

score 7 · Answer 3 · answered Jan 22 '13 at 13:58

7

No you can't do it. And by the way this is not good idea to load all 50 separate files. Consider compressing them in one single script to improve performance and decrease page load time.

answered Jan 22 '13 at 13:58

dfsq

191,768
25
236
258

You can't do this directly, however you can dynamically load script files. – Sean Airey Jan 22 '13 at 14:01
22

how is a minified JS file supposed to help me when I am in developement mode? – Oliver Watkins Jan 31 '13 at 09:21

thSoft · Answer 4 · 2014-02-28T00:44:50.093

5

You can setup grunt to watch the folder of the scripts and concat/minify them into a single file, then you just have to include that in your HTML file.

edited Feb 28 '14 at 00:44

answered Feb 28 '14 at 00:38

thSoft

21,755
5
88
103

score 2 · Answer 5 · answered Jan 22 '13 at 14:05

You will need to specify each file for the browser to know what to retrieve, but depending on the IDE you are using, there may be shortcuts for doing this, (Visual Studios allows you to drag and drop script files into the html to add references).

During development, you want to do just as your doing by keeping the files separate for troubleshooting, but in production, as others have commented, its very good practice to minify your code and combine them into one file. That makes it only one call, and can reduce your overhead significantly.

score 1 · Answer 6 · edited Oct 25 '17 at 05:02

1

I recommend you to use JSCompress. It will compress all your javascript code into one single javascript file.

edited Oct 25 '17 at 05:02

Orlandster

4,706
2
30
45

answered Oct 25 '17 at 03:14

Mohd Khairulamirin

11
3

score -1 · Answer 7 · answered Jul 26 '22 at 20:10

-1

import "./angular.min.js"
import "./jquery-3.6.0.min.js"
import "./app.js"

<script type="module" src="js/importJS.js"></script>

answered Jul 26 '22 at 20:10

Mouad Khomssan

1
3

3

Please read [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer). While this code block may answer the OP's question, this answer would be much more useful if you explain how this code is different from the code in the question, what you've changed, why you've changed it and why that solves the problem without introducing others. – Saeed Zhiany Jul 27 '22 at 02:52

How do you import multiple javascript files in HTML index file without the bloat?

7 Answers7

Linked