JavaScript is a dynamic programming language used for both client-side and server-side development. When you’re developing a JavaScript project, there is a need to use other JavaScript files in a JavaScript file itself. In this blog, we will learn about various methods to include a JavaScript file in another JavaScript file. including ES6 modules, CommonJS ( require() ), and <script> tags for browser-based applications.
Table of Contents:
Ways to Include a JavaScript File in Another JavaScript File
There are several ways to include a JavaScript file into another JavaScript file, depending on the environment in which you’re working:
Method 1: Using ES6 Module(import and export)
Using import() and export() you can include one JavaScript file into another file. This is the modern technique that was used in modern applications due to its efficiency.
- The export keyword is used to make functions, variables, and classes accessible in another file.
- While, the import keyword is used to use the functions, variables, and classes in the currently working file.
Example:
math.js
export function add(a, b) {
return a + b;
}
export const pi = 3.14;
main.js
import { add, pi } from './math.mjs';
console.log(add(5, 5));
console.log(pi);
Output:
Explanation: In the above example, we are using the import and export keywords to include a JavaScript file into another JavaScript file. Two files are created: one is math.mjs for exporting variables and functions, and another file is main.mjs for using the exported functions and variables.
Important Point:
- If you’re working on Node.js then you have to either use .mjs as the file extension or add type: “module” to your package.json file.
- In browsers, you must add type=”module” in your <script> tag:
Syntax:
<script type="module" src="main.mjs"></script>
Method 2: Using require() – For Node.js
Before ES6 when import and export is not defined Node.js depend on the CommonJS module system that uses require() and module.exports for including one JavaScript file into another JavaScript file.
Example:
math.js
function add(a,b) {
return a + b;
}
const pi = 3.14;
module.exports = { add, pi };
main.js:
const { add, pi } = require('./math.js');
console.log(add(4, 5));
console.log(pi);
Output:
Explanation: CommonJS is mostly used in Node.js applications. If you’re working on older node.js projects, require() is necessary.
Method 3: Using <script> Tag – Browser-Based JavaScript
If you’re working with JavaScript in your browser, you can include multiple external JavaScript files using the <script> tag in your HTML file.
Example:
<!– index.html –>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Adding Multiple JavaScript Files</title>
<script src="math.js"></script>
<script src="main.js"></script>
</head>
<body>
<h1>Learn JavaScript With Intellipaat.</h1>
</body>
</html>
Explanation: In the above example, math.js and main.js will be loaded when the page loads. This method is simple but not recommended for large-scale projects.
Comparison – Which Method Should You Use?
Here is the comparison between all three methods that you should possibly use to include a JavaScript file into another JavaScript file.
| Methods | Best Used For? | Important Note |
| ES6 Modules (import/export) | Used for both whether you’re working on node.js or working on the browser. | Add .mjs extension or add Type: “module” in the package.json file. |
| require() (CommonJS) | Used in Node.js projects | Still mostly used in projects, but it is recommended to use import/export. |
| <script> Tag | Used in simple browser-based projects | Not suitable for building complex, large-scale projects. |
Common Errors and How to Fix Them
- “Cannot use import statement outside a module”:
This error occurs if you’re using the import statement in a non-module environment. To fix this issue, you have to save your JavaScript file with a .mjs extension, or you have to write type: “module” in the package.json file.
- “Module not found”:
This happens when the file path is incorrect. To fix this, ensure your file path is correct.
Conclusion
Breaking the JavaScript code into multiple files and using it again in other JavaScript files helps in improving readability and code usability. You can use multiple methods to add a JavaScript file into another JavaScript file, like import/export for modern and industry-level projects, require() used in older projects, and the <script> tag for simple browser-based projects. Use these methods by considering their best use cases.
How to include a JavaScript file in another JavaScript file – FAQs
Q1. How to use a function from one JavaScript file in another JavaScript file?
Export the function using export or module.exports and import it using import or require().
Q2. Can I mix import and require() in the same project?
It is possible to do so, but it is not recommended due to compatibility issues.
Q3. What if I get an error saying "Cannot use import statement outside a module"?
Save your javascript file with .mjs extension or add type: “module” in the package.json file.
Q4. How do you declare JavaScript variables?
You can declare JavaScript variables by using the let, const, and var keywords.
Q5. What is the difference between require() and import?
require() is used in CommonJS (Node.js), while import is used in ES6 modules.