How do I include a JavaScript file in another JavaScript file?

Question

Is there something in JavaScript similar to @import in CSS that allows you to include a JavaScript file inside another JavaScript file?

Why not declaring the imported file before the other one that requires it, simply using ordered script tags? — falsarella, Jan 6 '15 at 21:07
@Claudiu That wouldn't help to import anything, but it should work as well. If you have a JS file that depends of another JS file, just declare the script tags of the dependency files first, so the later will already have its dependencies loaded. If you have a situation where it isn't a possible approach, the answers here should be helpful. — falsarella, Feb 19 at 12:29

Peter Mortensen · Answer 1 · 2014-10-19 18:17:10Z

up vote 3 down vote

Here is a Grunt plugin allowing you to use @import "path/to/file.js"; syntax in any file including JavaScript files. It can be paired with uglify or watch or any other plugin.

It can be installed with npm install: https://npmjs.org/package/grunt-import

edited Oct 19 '14 at 18:17

Peter Mortensen

10.5k1372108

answered Nov 6 '13 at 17:35

Marcin

2,67293659

add a comment |

tfont · Answer 2 · 2015-02-08 01:19:44Z

Keep it nice, short, simple, and maintainable! :]

// 3rd party plugins / script (don't forget the full path is necessary)
var FULL_PATH = '', s =
[
    FULL_PATH + 'plugins/script.js'      // Script example
    FULL_PATH + 'plugins/jquery.1.2.js', // jQuery Library 
    FULL_PATH + 'plugins/crypto-js/hmac-sha1.js',      // CryptoJS
    FULL_PATH + 'plugins/crypto-js/enc-base64-min.js'  // CryptoJS
];

function load(url)
{
    var ajax = new XMLHttpRequest();
    ajax.open('GET', url, false);
    ajax.onreadystatechange = function ()
    {
        var script = ajax.response || ajax.responseText;
        if (ajax.readyState === 4)
        {
            switch(ajax.status)
            {
                case 200:
                    eval.apply( window, [script] );
                    console.log("library loaded: ", url);
                    break;
                default:
                    console.log("ERROR: library not loaded: ", url);
            }
        }
    };
    ajax.send(null);
}

 // initialize a single load 
load('plugins/script.js');

// initialize a full load of scripts
if (s.length > 0)
{
    for (i = 0; i < s.length; i++)
    {
        load(s[i]);
    }
}

This code is simply a short functional example that could require additional feature functionality for full support on any (or given) platform.

Peter Mortensen · Answer 3 · 2016-12-11 09:45:11Z

I had a simple issue, but I was baffled by responses to this question.

I had to use a variable (myVar1) defined in one JavaScript file (myvariables.js) in another JavaScript file (main.js).

For this I did as below:

Loaded the JavaScript code in the HTML file, in the correct order, myvariables.js first, then main.js:

<html>
    <body onload="bodyReady();" >

        <script src="myvariables.js" > </script>
        <script src="main.js" > </script>

        <!-- Some other code -->
    </body>
</html>

File: myvariables.js

var myVar1 = "I am variable from myvariables.js";

File: main.js

// ...
function bodyReady() {
    // ...
    alert (myVar1);    // This shows "I am variable from myvariables.js", which I needed
    // ...
}
// ...

As you saw, I had use a variable in one JavaScript file in another JavaScript file, but I didn't need to include one in another. I just needed to ensure that the first JavaScript file loaded before the second JavaScript file, and, the first JavaScript file's variables are accessible in the second JavaScript file, automatically.

This saved my day. I hope this helps.

This is exactly what I needed, thanks for this simple demonstration. — Paul, Aug 30 at 9:23

emolaus · Answer 4 · 2013-01-16 14:04:33Z

up vote 2 down vote

Don't forget to check out LAB.js!

<script type="text/javascript">
       $LAB
       .script("jquery-1.8.3.js").wait()
       .script("scripts/clientscript.js");      
</script>

answered Jan 16 '13 at 14:04

emolaus

446513

2

Unfortunately, it's not really under development any more, and there's no guarantee that some future browser or JS engine or language version won't break it. You should try to be as up-to-date as possible with JS, although there is something to be said for stability. Even though this could be a good option for somebody, I'd much rather steer them toward RequireJS or jQuery.getScript(), both of which are stable and under constant development. – MattDMo Jun 1 '13 at 18:02

add a comment |

The_asMan · Answer 5 · 2013-03-14 17:26:30Z

up vote 2 down vote

var s=["Hscript.js","checkRobert.js","Hscript.js"];
for(i=0;i<s.length;i++){
  var script=document.createElement("script");
  script.type="text/javascript";
  script.src=s[i];
  document.getElementsByTagName("head")[0].appendChild(script)
};

edited Mar 14 '13 at 17:26

The_asMan

5,66111534

answered Mar 10 '13 at 13:55

robert

9711

2

This doesn't seem like a complete answer. – Lee Taylor Mar 10 '13 at 14:11

1

Where is this from? What's the deal with "checkRobert"? – Dan Dascalescu Jul 8 '15 at 2:21

add a comment |

Peter Mortensen · Answer 6 · 2014-10-19 18:14:26Z

up vote 2 down vote

I also wrote a JavaScript dependency manager for Java web applications: JS-Class-Loader.

edited Oct 19 '14 at 18:14

Peter Mortensen

10.5k1372108

answered Nov 1 '13 at 0:15

Damon Smith

1,318918

add a comment |

Peter Mortensen · Answer 7 · 2016-12-11 10:02:37Z

There are a lot of potential answers for this question. My answer is obviously based on a number of them. Thank you for all the help. This is what I ended up with after reading through all the answers.

The problem with $.getScript and really any other solution that requires a callback when loading is complete is that if you have multiple files that use it and depend on each other you no longer have a way to know when all scripts have been loaded (once they are nested in multiple files).

Example:

file3.js

var f3obj = "file3";

// Define other stuff

file2.js:

var f2obj = "file2";
$.getScript("file3.js", function(){

    alert(f3obj);

    // Use anything defined in file3.
});

file1.js:

$.getScript("file2.js", function(){
    alert(f3obj); //This will probably fail because file3 is only guaranteed to have loaded inside the callback in file2.
    alert(f2obj);

    // Use anything defined in the loaded script...
});

You are right when you say that you could specify Ajax to run synchronously or use XMLHttpRequest, but the current trend appears to be to deprecate synchronous requests, so you may not get full browser support now or in the future.

You could try to use $.when to check an array of deferred objects, but now you are doing this in every file and file2 will be considered loaded as soon as the $.when is executed not when the callback is executed, so file1 still continues execution before file3 is loaded. This really still has the same problem.

I decided to go backwards instead of forwards. Thank you document.writeln. I know it's taboo, but as long as it is used correctly this works well. You end up with code that can be debugged easily, shows in the DOM correctly and can ensure the order the dependencies are loaded correctly.

You can of course use $("body").append(), but then you can no longer debug correctly any more.

NOTE: You must use this only while the page is loading, otherwise you get a blank screen. In other words, always place this before / outside of document.ready. I have not tested using this after the page is loaded in a click event or anything like that, but I am pretty sure it'll fail.

I liked the idea of extending jQuery, but obviously you don't need to.

Before calling document.writeln, it checks to make sure the script has not already been loading by evaluating all the script elements.

I assume that a script is not fully executed until its document.ready event has been executed. (I know using document.ready is not required, but many people use it, and handling this is a safeguard.)

When the additional files are loaded the document.ready callbacks will get executed in the wrong order. To address this when a script is actually loaded, the script that imported it is re-imported itself and execution halted. This causes the originating file to now have its document.ready callback executed after any from any scripts that it imports.

Instead of this approach you could attempt to modify the jQuery readyList, but this seemed like a worse solution.

Solution:

$.extend(true,
{
    import_js : function(scriptpath, reAddLast)
    {
        if (typeof reAddLast === "undefined" || reAddLast === null)
        {
            reAddLast = true; // Default this value to true. It is not used by the end user, only to facilitate recursion correctly.
        }

        var found = false;
        if (reAddLast == true) // If we are re-adding the originating script we do not care if it has already been added.
        {
            found = $('script').filter(function () {
                return ($(this).attr('src') == scriptpath);
            }).length != 0; // jQuery to check if the script already exists. (replace it with straight JavaScript if you don't like jQuery.
        }

        if (found == false) {

            var callingScriptPath = $('script').last().attr("src"); // Get the script that is currently loading. Again this creates a limitation where this should not be used in a button, and only before document.ready.

            document.writeln("<script type='text/javascript' src='" + scriptpath + "'></script>"); // Add the script to the document using writeln

            if (reAddLast)
            {
                $.import_js(callingScriptPath, false); // Call itself with the originating script to fix the order.
                throw 'Readding script to correct order: ' + scriptpath + ' < ' + callingScriptPath; // This halts execution of the originating script since it is getting reloaded. If you put a try / catch around the call to $.import_js you results will vary.
            }
            return true;
        }
        return false;
    }
});

Usage:

file3:

var f3obj = "file3";

// Define other stuff
$(function(){
    f3obj = "file3docready";
});

file2:

$.import_js('js/file3.js');
var f2obj = "file2";
$(function(){
    f2obj = "file2docready";
});

file1:

$.import_js('js/file2.js');

// Use objects from file2 or file3
alert(f3obj); // "file3"
alert(f2obj); // "file2"

$(function(){
    // Use objects from file2 or file3 some more.
    alert(f3obj); //"file3docready"
    alert(f2obj); //"file2docready"
});

Peter Mortensen · Answer 8 · 2016-12-11 09:32:59Z

Another approach is to use HTML imports. These can contain script references as well as stylesheet references.

You can just link an HTML file like

<link rel="import" href="vendorScripts.html"/>

Within the vendorScripts.html file you can include your script references like:

<script src="scripts/vendors/jquery.js"></script>
<script src="scripts/vendors/bootstrap.js"></script>
<script src="scripts/vendors/angular.js"></script>
<script src="scripts/vendors/angular-route.js"></script>

Look at https://www.html5rocks.com/en/tutorials/webcomponents/imports/ for more details.

Unfortunately this only works in Chrome.

Peter Mortensen · Answer 9 · 2016-12-11 09:39:28Z

I basically do it like the following, creating a new element and attach that to head:

var x = document.createElement('script');
x.src = 'http://example.com/test.js';
document.getElementsByTagName("head")[0].appendChild(x);

In jQuery:

// jQuery
$.getScript('/path/to/imported/script.js', function()
{
    // Script is now loaded and executed.
    // Put your dependent JavaScript code here.
});

xgqfrms · Answer 10 · 2016-10-04 13:47:34Z

up vote 0 down vote

Here is maybe another way! In Node.js you do that just like the following! http://requirejs.org/docs/node.html

sub.js

module.exports = {
  log: function(string) {
    if(console) console.log(string);
  }
  mylog: function(){
    console.log('just for log test!');
  }
}

main.js

var mylog =require('./sub');

mylog.log('Hurray, it works! :)');
mylog.mylog();

answered Oct 4 at 13:47

xgqfrms

30018

just using for node+react test! – xgqfrms Oct 4 at 13:55

add a comment |

Mesut Yiğit · Answer 11 · 2016-10-19 08:18:54Z

up vote 0 down vote

var xxx = require("../lib/your-library.js")

or

import xxx from "../lib/your-library.js" //get default export
import {specificPart} from '../lib/your-library.js' //get named export
import * as _name from '../lib/your-library.js'  //get full export to alias _name

answered Oct 19 at 8:18

Mesut Yiğit

997

Is it plain javascript? – Guedes Oct 20 at 11:52

yes it's modern javascript (es6) and it's taking over real fast – Thielicious Oct 31 at 14:16

add a comment |

Peter Mortensen · Answer 12 · 2016-12-11 09:34:28Z

You can't import, but you can reference.

PhpShtorm IDE. To reference, in one .js file to another .js, just add this to the top of the file:

<reference path="../js/file.js" />

Of course, you should use your own PATH to the JavaScript file.

I don't know if it will work in other IDEs. Probably yes, just try. It should work in Visual Studio too.

Peter Mortensen · Answer 13 · 2016-12-11 09:37:36Z

I have the requirement to asynchronously load an array of JavaScript files and at the final make a callback. Basically my best approach is the following:

// Load a JavaScript file from other JavaScript file
function loadScript(urlPack, callback) {
    var url = urlPack.shift();
    var subCallback;

    if (urlPack.length == 0) subCallback = callback;
    else subCallback = function () {
        console.log("Log script: " + new Date().getTime());
        loadScript(urlPack, callback);
    }

    // Adding the script tag to the head as suggested before
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = subCallback;
    script.onload = subCallback;

    // Fire the loading
    head.appendChild(script);
}

Example:

loadScript(
[
    "js/DataTable/jquery.dataTables.js",
    "js/DataTable/dataTables.bootstrap.js",
    "js/DataTable/dataTables.buttons.min.js",
    "js/DataTable/dataTables.colReorder.min.js",
    "js/DataTable/dataTables.fixedHeader.min.js",
    "js/DataTable/buttons.bootstrap.min.js",
    "js/DataTable/buttons.colVis.min.js",
    "js/DataTable/buttons.html5.min.js"
], function() { gpLoad(params); });

The second script will not load until the first is completely loaded, and so...

Results:

script.onreadystatechange will never fire. It's specific to XMLHttpRequest. If it would fire, for example because you were actually loading the script using XMLHttpRequest, it would cause your callback to be called too often. So you should remove that line. — Julian, Aug 7 at 21:27

Amir Saniyan · Answer 14 · 2013-10-09 17:39:28Z

up vote -1 down vote

function include(js)
{
    document.writeln("<script src=" + js + "><" + "/script>");
}

edited Oct 9 '13 at 17:39

answered Oct 8 '13 at 23:09

Amir Saniyan

3,84394788

Why was this downvoted? I'm no JS expert, but wouldn't this work? – Gottlieb Notschnabel Oct 20 '13 at 11:35

5

Because if the page is already done loading when it is executing, or if it is executed because of a user action, then it will clear the page first. – SevenBits Oct 20 '13 at 11:56

@SevenBits is correct and this answer is buggy, see this page: developer.mozilla.org/en-US/docs/Web/API/Document/write – Flimm Jun 18 '15 at 14:52

@Flimm you could have linked to the page on writeln instead, but it's basically the same. – gcampbell Jun 22 at 19:21

add a comment |

asked	7 years ago
viewed	1738917 times
active	6 days ago

current community

your communities

more stack exchange communities

How do I include a JavaScript file in another JavaScript file?

44 Answers 44

Example:

protected by NullPoiиteя Jun 10 '13 at 5:07

Not the answer you're looking for? Browse other questions tagged javascript file import include or ask your own question.

Linked

Hot Network Questions

current community

your communities

more stack exchange communities

How do I include a JavaScript file in another JavaScript file?

44 Answers 44

Example:

protected by NullPoiиteя Jun 10 '13 at 5:07

Not the answer you're looking for? Browse other questions tagged javascript file import include or ask your own question.

Linked

Related

Hot Network Questions