How to Include One JavaScript File Inside Another (Modern and Legacy Methods)

Many developers wonder how to include one JavaScript file inside another, similar to the way CSS uses @import. The method you choose depends on the environment (browser or Node.js) and the level of compatibility you need. Modern JavaScript provides native ways to import and manage modules, while older approaches rely on dynamic loading or third-party libraries.

How to Include One JavaScript File Inside Another Modern and Legacy Methods

coldshadow44 on 2025-10-15

Comment

Showing comments related to this post.

_coldshadow44

2025-10-15

In older versions of JavaScript, there was no native way to import or include another file. Developers often used different workarounds such as dynamic script loading, AJAX requests, or the require() function in Node.js. However, since the introduction of ECMAScript 2015 (ES6), JavaScript now supports a standard module system that makes importing files much simpler and cleaner.

1. Using ES6 Modules (Modern JavaScript)

ES6 introduced the import and export keywords, which allow developers to organize code into reusable modules. This method is now supported by all modern browsers and Node.js (version 13.8.0 and higher).

Example using import and export:

module.js

export function hello() {

return "Hello";

}

main.js

import { hello } from './module.js';

console.log(hello()); // Output: Hello

In Node.js, you can enable ES6 modules by adding "type": "module" to your package.json, or by using the .mjs file extension.

2. Using ECMAScript Modules in Browsers

Modern browsers can load modules directly without any build tools like Webpack. Just use the type="module" attribute in your <script> tag:

import { hello } from './hello.js';

hello('world');

</script>

And in hello.js:

export function hello(name) {

console.log(`Hello, ${name}`);

}

3. Dynamic Imports in Browsers

Dynamic imports allow you to load a script only when it’s needed. This helps reduce page load time and improve performance.

import('./hello.js').then(module => {

module.hello('world');

});

</script>

4. Using require() in Node.js (CommonJS Modules)

Before ES6, Node.js used the CommonJS module system with require() and module.exports:

mymodule.js

module.exports = {

hello: function() {

return "Hello";

}

};

server.js

const myModule = require('./mymodule');

console.log(myModule.hello());

5. Dynamic Script Loading in Browsers

If you need to include external JavaScript files on the fly, you can dynamically create a <script> element and append it to the DOM:

function loadScript(url, callback) {

const script = document.createElement('script');

script.src = url;

script.onload = callback;

document.head.appendChild(script);

}

// Example usage:

loadScript('my_lovely_script.js', function() {

console.log('Script loaded successfully.');

});

This approach allows you to load external scripts dynamically and execute callback functions once they’ve finished loading.

6. Build Tools and Preprocessing

For large projects, it’s best to use build tools like Webpack, Rollup, or Parcel. These tools combine and optimize multiple JavaScript files into one, improve performance, and provide backward compatibility for older browsers.

Summary:

To include a JavaScript file inside another, the most modern and efficient method is to use ES6 modules with import and export. For older environments or dynamic loading needs, use require() or dynamic script creation. For production-ready projects, rely on build tools for bundling and optimization.

Ask. Code. Learn. Grow with the Developer Community.