Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

javascript

How to use an ES modules aggregator file

Oluwatobi Sofela

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:

  1. index.html
  2. index.js
  3. preferences.js
  4. calculation.js
  5. bio.js
  6. aggregator.js

Note the following:

  1. The index.js file is a top-level module because it is the file wherein we’ll import and use calculation.js, preferences.js, and bio.js.
  2. The calculation.js file, preferences.js, and bio.js are the submodules because we will import them into the top-level module.
  3. The aggregator.js file 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>
The index.html file

In lines 12–16 of the index.html file above:

  1. We added five JavaScript files to the HTML document.
  2. 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>
Alternate way of writing index.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 };
The preference.js file

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;
}
The calculation.js file

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;
The bio.js file

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.js

import { bestFruits } from "./preferences.js";
import { multiply } from "./calculation.js";
import aboutMe from "./bio.js";

export { bestFruits, multiply, aboutMe };
The aggregator.js file

A shorter way to write the import/export statements mentioned above is like so:

// aggregator.js

export { bestFruits } from "./preferences.js";
export { multiply } from "./calculation.js";
export { default as aboutMe } from "./bio.js";
Alternate way of importing and exporting modules

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.js
aggregator.js
bio.js
calculation.js
preferences.js
// index.js

import { bestFruits, multiply, aboutMe } from "./aggregator.js";

const news = `All ${aboutMe.companyName}'s staff gave Tom ${multiply(7, 129)} ${bestFruits[2]}s.`;

console.log(news);
Implementation of the aggregator module

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.

RELATED TAGS

javascript
RELATED COURSES

View all Courses

Keep Exploring