Introduction

There exists several ways to solve the include a file using javascript. We are going to analyze different solution.

Old javascript version

In the next two solution we propose how to use it without frameworks.

Using script tag in your html

This could sound the most obvious way to solve this problem. If you are looking to solve this issue with modern javascript framework see below.

When you import .js file in your html the order is very important and you can think that the previous \<script> tags are like imports. For example if you script requires jQuery you will need to import first jQuery library and then your script:

<script src="jquery-3.3.1.min.js"></script>
<script src="your-script.js"></script>

In the order above your-script.js can use any jQuery function. Of course you will need to write your code inside $( document ).ready().

Remember JavaScript executes globally. Adding both scripts on the page makes them available.

Using document.createElement

The next code will load the code from your-script.js, this is a little dirty way to import files:

var imported = document.createElement('script');
imported.src = '/your-script.js';
document.head.appendChild(imported);

The code above allow you to load files dynamically.

Add the loaded code to the head

The following code will load your-scripts.js and append it to the head of the document:

var x = document.createElement('script');
x.src = 'your-scripts.js';
document.getElementsByTagName("head")[0].appendChild(x);

You will need to use a callback when the script loaded successfully:

x.onload=another_file_loaded;

On another_file_loaded you could start using functions from your-scripts.js or enable flags to let know your application that everything was loaded.

The problem with the code above is that is asynchronous and you can predict the order of loading.

Using Jquery

Previous idea is static and it will not allow you to fetch js files dynamically. Using jQuery this is possible with getScript

// jQuery
$.getScript('/your-script.js', function()
{
    // your-script.js is now loaded and you can use any function from it.
});

Using modern javascript ES6 Modules

ES6 modules are support from this browsers versions:

• Chrome 61
• Firefox 55
• MS Edge 16

We will use two files: functions.js and main.js. We will use import statement on main.js to import functions from functions.js.

Contents of functions.js:

export function tutorials() {
  return "Technology";
}

Contents of main.js:

import {tutorials} from 'functions'; 
console.log(tutorials());

After the execution of the code above you will see printed in the console "Technology".

Node.js require

Node.js uses module.exports/require system.

Contents of your-scripts.js:

module.exports = {
   tutorials: function() {
      return "Technology";
   }
}

Contents of main.js:

const myFunctions = require('./your-scripts');
console.log(myFunctions.tutorials());

The example above will output on the console "Technology". If you want to use the import statements, babel allows your to do it.

RequireJS

RequireJS allows you to import from another file. Let's see with with one example:

your-scripts.js contents:

define(['helper/util'], function (util) {
    return {
        tutorials: function() {
            return "Technology";
        }
    }
});

Your main.js contents:

define(function (require) {
    // Load any app-specific modules
    var functions = require('./your-scripts');

    console.log(functions.getHello());
});

The example above will print "Technology" in the console like the previous examples.