Modules in JavaScript

Remember the ToDo List app we built in the previous chapter? We used npm to install Babel to transform our ES6 code to ES5. Navigate to the ToDo List folder and open up the node_modules folder. You will find a huge list of folders containing various packages! Even though you installed only four packages, npm has traced out all the dependencies of the required packages and installed them along with the actual packages.

We only used those packages as dev-dependencies to compile our code. So, we didn't know how those packages are built. Those packages are built as modules. A module is an independent piece of reusable code that returns a value. The value can be an object, function, string, int, and so on. Modules are widely used for building large applications. Node.js comes with support for exporting and importing JavaScript modules which are currently unavailable in the browser.

Let's see how we can create a simple module in JavaScript:

function sum (a, b) {
  return a+b;
}

Consider the earlier mentioned function that returns a sum of two numbers. We are going to convert that function into a module. Create a new file sum.js and write the function as follows:

export function sum (a, b) {
  return a+b;
}

That's all! You just need to add an export keyboard before the variable or object you would like to export and it will become a module which can be used in a different file. Imagine you have a file called add.js, where you need to find the sum of two numbers. You can import the sum module as follows:

// In file add.js at the same directory as sum.js
import { sum } from './sum.js';

let a = 5, b = 6, total;
total = sum(a, b);

You can ignore the extension .js if you are importing a JavaScript file and use import { sum } from './sum'. You can also use the following:

let sum = (a, b) => return a+b;
module.exports = { sum };

Then, import it, as follows:

const sum = require('./sum');

module.exports and the require keyword has been used by Node.js for importing and exporting JavaScript modules even since before ES6 was introduced. However, ES6 has a new module syntax using the keywords import and export. Webpack supports all types of imports and exports. For our project, we'll stick with ES6 modules.

Consider the following file sides.js, which contains the number of sides of geometrical figures in more than one module:

export default TRIANGLE = 3;
export const SQUARE = 4;
export const PENTAGON = 5;
export const HEXAGON = 6;

To import all of them into our file, you can use the following:

import * as sides from './sides.js';

Now, all the exported variables/objects from the sides.js file will be accessible inside the sides object. To get the value of TRIANGLE, just use sides.LINE. Also, note that TRIANGLE is marked default. A default export is useful when there are multiple modules in the same file. Type in the following:

import side from './sides.js';

Now, side will contain the value of the default export TRIANGLE. So, now side = 3. To import other modules along with the default module, you can use the following:

import TRIANGLE, { SQUARE, PENTAGON, HEXAGON } from './sides.js';

Now, if you want to import a module that is present inside the node_modules folder, you can ignore the relative file path (./ part) completely and just type import jquery from 'jquery';. Node.js or Webpack will automatically find the nearest node_modules folder from the file's parent directories and automatically search for the required package. Just make sure you have installed the package using npm install.

That pretty much covers the basics of using modules in JavaScript. Now it's time to learn about the role of Webpack in our project.