DEV Community

Avnish
Avnish

Posted on

How to Include a JavaScript File in Another JavaScript File

Including one JavaScript file in another is a fundamental concept in JavaScript development. It allows you to break your code into smaller, reusable modules for better organization and maintainability. There are different methods for achieving this based on the environment (browser or Node.js) and the version of JavaScript being used.

Here’s a complete guide to help you understand the various ways to include a JavaScript file in another, along with examples.


1. Using ES6 Modules (import and export)

This is the modern and recommended way to include one JavaScript file in another. It allows you to export code (functions, constants, or classes) from one file and import it into another.

Example:

File 1: math.mjs

// Export a function and a constant
export function add(n1, n2) {
    return n1 + n2;
}
export const pi = 3.14159;
Enter fullscreen mode Exit fullscreen mode

File 2: main.mjs

// Import the function and constant
import { add, pi } from './math.mjs';

console.log(add(2, 3)); // Output: 5
console.log(pi);        // Output: 3.14159
Enter fullscreen mode Exit fullscreen mode

Key Notes:

  • Use the .mjs file extension or set "type": "module" in your package.json file if you're working in a Node.js environment.
  • Relative paths (./ or ../) are mandatory unless importing from a package.
  • This method supports tree-shaking, which removes unused code during bundling.

2. Using require() (CommonJS – Node.js)

In Node.js, the CommonJS module system is commonly used. This method relies on module.exports and require() for including files.

Example:

File 1: math.js

// Export using CommonJS syntax
function add(n1, n2) {
    return n1 + n2;
}
const pi = 3.14159;

module.exports = { add, pi };
Enter fullscreen mode Exit fullscreen mode

File 2: main.js

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

console.log(add(2, 3)); // Output: 5
console.log(pi);        // Output: 3.14159
Enter fullscreen mode Exit fullscreen mode

Key Notes:

  • Use require() in Node.js or environments that support CommonJS.
  • This method is not natively supported in modern browsers without bundlers like Webpack or Rollup.

3. Using <script> Tags in HTML (Browser-based JavaScript)

For browser environments, you can include multiple JavaScript files directly using <script> tags in your HTML file.

Example:

HTML File: index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="math.js"></script>
    <script src="main.js"></script>
</head>
<body>
    <h1>JavaScript File Inclusion</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

File 1: math.js

function add(n1, n2) {
    return n1 + n2;
}
const pi = 3.14159;
Enter fullscreen mode Exit fullscreen mode

File 2: main.js

console.log(add(2, 3)); // Output: 5
console.log(pi);        // Output: 3.14159
Enter fullscreen mode Exit fullscreen mode

Key Notes:

  • The order of the <script> tags matters, as scripts are executed sequentially.
  • To use ES6 modules in the browser, include the type="module" attribute:
  <script type="module" src="main.mjs"></script>
Enter fullscreen mode Exit fullscreen mode

4. Using Dynamic Imports (ES6)

Dynamic imports allow you to load JavaScript modules at runtime, which is useful for lazy loading or conditionally including files.

Example:

// Dynamically import the module
import('./math.mjs').then((module) => {
    console.log(module.add(2, 3)); // Output: 5
    console.log(module.pi);        // Output: 3.14159
});
Enter fullscreen mode Exit fullscreen mode

Key Notes:

  • import() returns a promise that resolves to the module.
  • Useful for optimizing performance in large applications by loading code only when needed.

Choosing the Right Method

Scenario Recommended Method
Modern JavaScript development ES6 Modules (import/export)
Node.js environment require() (CommonJS)
Browser without bundlers <script> tags
Dynamic or conditional imports Dynamic import() (ES6)

Conclusion

Including JavaScript files in other JavaScript files is a foundational concept in web development. The method you choose depends on the environment you're working in and the needs of your project. For modern development, ES6 modules are the go-to solution, offering powerful features like tree-shaking and dynamic imports. For legacy or Node.js projects, require() and <script> tags remain viable options.

Top comments (0)