How to include a JavaScript file in another JavaScript file

some time ago we wrote about how to Import one JS file into another in the plain JS, those techniques described were quite old and in the modern era javascript has changed a lot and new frameworks have come out with a better syntax. In this case we will use the ES6 syntax to better include Js files in other Js files.

What are ES6 Modules?

In the early era of the web, the role of JavaScript was limited to form validation and to provide a little bit of interactivity, so large scripts were not needed.
Today, JavaScript has become a primary language to develop web apps including both backend and frontend. Thus the size of the JS programs has also grown exponentially making it harder to manage code.

This motivated the use of module system, a way to divide the code into multiple files and directories but still make sure all the bits of code can access one another.

As the old versions of JavaScript have no native module system, many JavaScript libraries come with their own. For example — CommonJS and RequireJS.

JavaScript introduced a native module system in ES6 (ECMAScript 6 — the official name of JavaScript) called the ES6 Module.

An ES6 module is just a file containing JS code with two special characteristics:

• It is automatically in strict-mode: this prohibits the use of sloppy mistakes in the code, like using variables without defining.
• You can use the import or export keyword inside of it: providing a way to share the code with other files.

Let’s discuss different ways to achieve modularity and learn how to import a JS file in a JS file.

Popular Ways to Include a JavaScript File in Another JavaScript File

In this section, we will learn about two popular ways of including a JS file in another JS file:

• Using ES6 modules.
• Using Node JS requires a function.

Using import/export | ES6 module

Let’s start by using the ES6 way of importing and exporting. Create a file named utils.js and define the following function and constant inside it:

export function greet(name) {
return `Hello, ${name}`;
}export const message = "How you doing?";

Notice, we used the export keyword before the function and variable to specify that these objects can be used by other files.

Now, create another file named main.js and write the following code in it:

import { greet, message } from "./utils.js";const greet_yash = greet("Yash");console.log(greet_yash); // Hello, Yash
console.log(message); // How you doing?

In the first line, we are importing greet and message from utils.js by specifying them inside of curly braces {}.
After this line, we can use the imported objects as they are defined in the same file. Then, we console logged the output of both the objects.

ES6 syntax for importing: import {object1, object2, …} from ‘filename.js’

If you are going to use ES6 modules in a node js environment, remember to name your files with .mjs extension or set “type”: “module” in the package.json file.

Using Default Exports

We can use the default keyword to export one object by default from a file. What does this mean? Let’s see with an example. Make the greet function in utils.js a default export by adding default before it:

export default function greet(name) {
return `Hello, ${name}`;
}

Now, you can import it in main.js like this:

import randomName from "./utils.js";
const greet_yash = randomName("Yash");
console.log(greet_yash); // Hello, Yash

It will work the same as before!

While performing default export, randomName is imported from greet.js. Since randomName is not in utils.js, the default export (greet() in this case) is exported as random_name.

Note :

Let’s discuss some important points related to ES6 modules that one should remember when using them:

• We have to remove the curly braces when importing default exports.
  For instance, if we have kept the braces in the randomName example above like this:

import { randomName } from "./utils.js";

• It would have thrown an error saying no such export exists.
• A file can contain multiple exports. However, we can only define a single default export in a file.
  Thus the following JavaScript code is invalid :

export default function greet(name) {
return `Hello, ${name}`;
}export default defaultMessage = "Not Possible";export const message = "How you doing?";

• We cannot use an alias name when importing a normal export.
  Thus the following import is invalid

import { randomMessage } from "./utils.js";

• We can mix default and normal exports like this:

import defaultExport, {export1, export2} from "file.js"

• We can import an entire module’s content using the *:

import * as utils from 'utils.js';

• You can export all the objects together at the end of the file Example:

function greet(name) {
return `Hello, ${name}`;
}
const message = "How you doing?";
export { greet, message };

Using ECMAScript (ES6) modules in browsers

Most modern browsers like chrome, safari and firefox have support for running ES6 modules directly. Let’s try running the modules created before in a browser.

In the previous section, we created two JS files with the following code:

• utils.js

export function greet(name) {
return `Hello, ${name}`;
}export const message = "How you doing?";

• main.js

import { greet, message } from "./utils.js";
const greet_yash = greet("Yash");
console.log(greet_yash); 
console.log(message);

In the main.js file, we imported and used a function from utils.js using the import keyword.

Now, we want to run main.js using a browser by linking the main.js module to an HTML file.

Therefore, create an index.html file and include the main.js script as follows:

We need the type=”module” attribute in the