How to use an ES modules aggregator file
Overview
An aggregator file is a script we solely use to import and re-export the exported items of other modules.
In other words, instead of congesting our top-level module with multiple import statements from various files, we can create a single parent script called the aggregator file. The parent script’s sole function will be to import and re-export items from other modules.
Then, in our top-level module, we can import any required code from the aggregator file alone—not from numerous other scripts. By so doing, we’ll make our top-level module neater.
We’ll learn how to create and use an aggregator file in the following steps below.
Step 1: Create a project directory
First, we create a project folder, where this project’s HTML and module files would reside.
Step 2: Create code files
Next, we create the following files inside our project folder:
index.htmlindex.jspreferences.jscalculation.jsbio.jsaggregator.js
Note the following:
- The
index.jsfile is a top-level module because it is the file wherein we’ll import and usecalculation.js,preferences.js, andbio.js. - The
calculation.jsfile,preferences.js, andbio.jsare the submodules because we will import them into the top-level module. - The
aggregator.jsfile is the parent module because it is the script we will use to aggregate and re-export the three submodules.
Step 3: Add the JavaScript files to the HTML document
Next, we open our index.html file and replicate the code below:
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ES Module - CodeSweetly</title></head><body><h1>How to use an aggregator file - ES Module Tutorial</h1><h2>Check the console</h2><script type="module" src="index.js"></script><script type="module" src="preferences.js"></script><script type="module" src="calculation.js"></script><script type="module" src="bio.js"></script><script type="module" src="aggregator.js"></script></body></html>
In lines 12–16 of the index.html file above:
- We added five JavaScript files to the HTML document.
- We used
type="module"to convert the regular JavaScript files to ES module files.
Technically, we can indicate just the top-level module in our project’s HTML file like so:
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ES Module - CodeSweetly</title></head><body><h1>How to use an aggregator file - ES Module Tutorial</h1><h2>Check the console</h2><script type="module" src="index.js"></script></body></html>
By so doing, we avoid cluttering our HTML page with the submodules and parent module.
Step 4: Export items from our preference module
Next, we open our preferences.js module and export some items from it like so:
const bestFruits = ["Grape", "Apple", "Pineapple", "Lemon"];const bestColor = "White";const bestNumber = 111;const bestClub = "Your Club";const bestTime = "Now";export { bestClub, bestFruits };
Step 5: Export items from our calculation module
We then open our calculation.js module and export some items from it as follows:
function add(x, y) {return x + y;}function subtract(x, y) {return x - y;}export function multiply(x, y) {return x * y;}function divide(x, y) {return x / y;}
Step 6: Export items from our bio module
We open our bio.js module and export some items from it like this:
const aboutMe = {firstName: "Oluwatobi",lastName: "Sofela",companyName: "CodeSweetly",profession: "Web Developer",gender: "Male",};export default aboutMe;
Step 7: Use the aggregator module to aggregate the submodules
Next, we use the aggregator.js module to import and re-export all our submodules’ exported items:
// aggregator.jsimport { bestFruits } from "./preferences.js";import { multiply } from "./calculation.js";import aboutMe from "./bio.js";export { bestFruits, multiply, aboutMe };
A shorter way to write the import/export statements mentioned above is like so:
// aggregator.jsexport { bestFruits } from "./preferences.js";export { multiply } from "./calculation.js";export { default as aboutMe } from "./bio.js";
Whenever we use the export...from syntax to re-export a default export, we need to rename the re-exportation as highlighted above.
Note: The following syntax is invalid:
export aboutMe from "./bio.js";
Now, let’s see how to import re-exported features from an aggregator file.
Step 8: Import our exports from the aggregator file
Once we’ve aggregated all our submodules into the aggregator module, we’ll go to our top-level script (index.js) and import the exported items.
Example
// index.jsimport { bestFruits, multiply, aboutMe } from "./aggregator.js";const news = `All ${aboutMe.companyName}'s staff gave Tom ${multiply(7, 129)} ${bestFruits[2]}s.`;console.log(news);
In the snippet above, the top-level script imported the bestFruits, multiply, and aboutMe features from only the aggregator file—not from the preference, calculation, and bio modules.
Using an aggregator file to collate our project’s exports helps separate concerns and make our top-level module neater.
Free Resources
- undefined by undefined
- undefined by undefined
