How To Include a JavaScript File in Another JavaScript File?

Last Updated : 28 Oct, 2024

The import and export syntax available in ES6 (ECMAScript 2015) module is used to include a JavaScript file in another JavaScript file. This approach is the most modern and recommended way to share code between JavaScript files.

It allows you to break your code into smaller modules and then import the needed functions, classes, or variables from one file into another.

Using ES6 Modules (import and export)

With ES6, you can export code from one file and import it into another. This method is the simplest way to include a JavaScript file in another.

Example: In the math.mjs file, export the functions or variables:

JavaScript

// math.mjs

export function add(n1, n2) {
    return n1 + n2;
}

export const pi = 3.14159;

In the main.mjs file, import the exported functions or variables

JavaScript

// main.mjs

import { add, pi } from './math.mjs';

console.log(add(2, 3)); 
console.log(pi);

Output

5
3.14159

In this example, the add function and the pi constant are exported from the math.mjs file and imported into the main.mjs file using the import statement.

Note: 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.

Table of Content

Using require() (CommonJS)
Using script Tags for Browser-based JavaScript

Using require() Method (CommonJS)

In Node.js or environments that support CommonJS, you can use the require() function to include one JavaScript file in another. This approach is commonly used in Node.js.

Example:

JavaScript

// math.js

function add(n1, n2) {
    return n1 + n2;
}

const pi = 3.14159;

module.exports = { add, pi };

In the main.js file, use require() to import the module:

JavaScript

// main.js

const { add, pi } = require('./math.js');

console.log(add(2, 3));
console.log(pi);

Output

5
3.14159

Here, module.exports is used to export the add function and pi constant, and require() is used to import them in another file.

Using script Tags for Browser-based JavaScript

If you are working with JavaScript in a browser environment, you can include multiple JavaScript files by using <script> tags in your HTML file. You can load external JavaScript files this way.

HTML

<!-- index.html -->

<head>
    <script src="math.js"></script>
    <script src="main.js"></script>
</head>
<body>
    <h1>JavaScript File Inclusion</h1>
</body>

In this example, both math.js and main.js will be loaded in the specified order.

Which Approach Is Better in Different Cases?

ES6 Modules (import/export): This is the preferred approach for modern JavaScript applications. It is well-suited for both client-side and server-side JavaScript and works well with tools like Webpack.
require() (CommonJS): CommonJS is primarily used in Node.js. If you are working in a Node.js environment, using require() is still common, but ES6 modules are now supported as well.
Using <script> Tags: This is suitable for simple projects or when you need to load JavaScript files directly in an HTML file. However, for complex projects, module bundlers like Webpack or ES6 modules are recommended.

How to override a JavaScript function ?

ashishsaini3

Improve

Article Tags :

How To Include a JavaScript File in Another JavaScript File?

Using ES6 Modules (import and export)

Using require() Method (CommonJS)

Using script Tags for Browser-based JavaScript

Which Approach Is Better in Different Cases?

Similar Reads

Thank You!

What kind of Experience do you want to share?