Modules

Intro

1. Modules Overview

• In JavaScript, modules are individual files that contain related code that can be imported into other JavaScript files when needed.

• Back when JavaScript was only run in the browser, there would generally be a single JavaScript file attached to an HTML document through the script tag, and modules were not needed. And like today, JavaScript built-in objects and Web APIs were all attached to the window Global Object.
• But then in 2009 Node.js was released allowing JavaScript to be run outside the browser on servers and personal computers.

• In this tutorial we will cover both.

• To follow along with this tutorial, create a folder called modules. 

CommonJS

2a. CommonJS: Import Node modules or packages

• We will start with CommonJS syntax, which uses the require function to import modules.
• Place the require statements at the top of the file.
• Node.js has several core built-in modules. Some are attached to the global object, others need to be imported before being used.

• Create another folder in the modules folder called commonjs and add a file called app.js. Populate it with the below:

const path = require('path');
const { existsSync, readFileSync } = require('fs');

const filePath = path.join('.', 'modules', 'commonjs', 'calculator.js');
filePath; // returns "modules/commonjs/calculator.js"

if (existsSync(filePath)) {
  console.log(readFileSync(filePath, 'utf8'));
} else {
  console.log('File does not exist.');
}

• Some built-in Node.js modules are already attached to the global object and don't need to be imported to be used. Others are part of the Node.js program, but do need to be imported before being used.
• The path module is one of those. It has methods for parsing and creating file paths.
• To use it you need to call the require function, then assign it to a variable. You can name the variable anything you want, but it makes sense to just use the module name: path.
• To use methods attached to the module, use the path variable as the namespace, and chain the method to it. The path.join method returns a file path string by joining the argument values into one path.
• const filePath = path.join('.', 'modules', 'commonjs', 'calculator.js') returns: "modules/commonjs/calculator.js"

if (existsSync(filePath)) {
  console.log(readFileSync(filePath, 'utf8'));
}

const calculator = {
  double: (x) => x * 2,
  triple: (x) => x * 3,
};

module.exports = calculator;

...
const calculator = require('./calculator');
...
const res1 = calculator.double(10);
const res2 = calculator.triple(10);

console.log(res1, res2);

...
const { double, triple } = require('./calculator');
...
const res3 = double(10);
const res4 = triple(10);

console.log(res3, res4);

2c. CommonJS: User created modules - multiple exports

• A module file can contain multiple functions or other constructs. Then you export them as properties of a module.exports object. And import them using destructuring variable assignment.

• Create another module called calculator2.js that exports two separate functions. The half function divides the parameter value by two and the third function divides the parameter value by three. 
• To export them, set module.exports to an object containing properties for those two functions.

const half = (x) => x / 2;
const third = (x) => x / 3;

module.exports = { half, third };

• Back in the app.js file call the require function to import the module and use destructuring variable assignment to get the individual functions. 
• Then call the half and third functions passing in 10 as the argument.

...
const { half, third } = require('./calculator2');
...
const res5 = half(10);
const res6 = third(10);

console.log(res5, res6); // logs 5, 3.333333333

3a. Import modules with the import statement

• Once your files have been identified as modules they can export their content with the export statement, and their content can be imported with with the import statement.

• Import statement syntax when importing a default export:
• import variableName from 'moduleName'; 
• Import statement syntax when importing one or more named exports:
• import { export1[, export2, ...] } from 'moduleName'; 

• We will first demonstrate how to use import/export statements with Node.js. Node uses CommonJS modules by default. We need to let Node know if we are using ECMAScript modules. One way is to use .mjs file extensions.
• In the modules folder create a folder called mjs-examples, then add a file to it called app.mjs and populate it with the below:

modules/mjs-examples/app.mjs

import path from 'path';
import { existsSync, readFileSync } from 'fs';
import calculator from './calculator.mjs';
import { half, third } from './calculator2.mjs';

const filePath = path.join('.', 'modules', 'mjs', 'calculator.mjs');
if (existsSync(filePath)) {
  console.log(readFileSync(filePath, 'utf8'));
}
const res1 = calculator.double(10);
const res2 = calculator.triple(10);

const res3 = half(10);
const res4 = third(10);

console.log(res1, res2, res3, res4);

• This file is like the app.js file we used earlier, but it uses import statements instead of CommonJS require functions. And our module names use extension .mjs. 
• The path and calculator.mjs module variable is a single namespace for the default export.
• The fs and calculator2.mjs modules use destructuring variable assignment to specific named exports.

3b. Export modules with the export statement - default export

• When you split your code into multiple files you need to export the content of the module files. If the file contains a single object or other construct, you can export it with export default then the variable name:
• export default varName; 

• Create a file called calculator.mjs and populate it with a single object named calculator that contains two methods named double and triple. Export the object as a default export at the bottom of the file.

modules/mjs-examples/calculator.mjs

const calculator = {
  double: (x) => x * 2,
  triple: (x) => x * 3,
};

export default calculator;

3c. Export modules with the export statement - multiple named exports

• If your module contains multiple functions or other constructs, you can export them with the export statement followed by curly braces containing the function or variable names. These are called "named exports"
• export { var1[, var2,...] };
• In the importing file, use destructuring variable assignment to import the specific named exports needed from the module. 
• The named export names can then be used without the module namespace.

• Create a file named calculator2.mjs and populate it with two functions: half and double:

modules/mjs-examples/calculator2.mjs

const half = (x) => x / 2;
const third = (x) => x / 3;

export { half, third };

• To export the functions as named exports, place them at the bottom of the file in curly braces after the export keyword.

• Now you can run the module with the Debug sidebar or from the Terminal with node: 

• You should see the results logged to the console: 20 30 5 3.3333333333333335

3d. Rename imports

• Create a namespace for named exports: To create a namespace when importing a module with multiple named exports, import it with a wildcard * and assign it an alias.
• import * as name from 'module'; 
• Rename named exports: You can rename specific named exports as part of destructuring variable assignment.
• import { var1 as alias1[, var2 as alias2,...] } from 'module'; 

• We will demonstrate both of these. Create a file named app-aliases.mjs and populate it with the below.

modules/mjs-examples/app-aliases.mjs

import * as divider from './calculator2.mjs';
import { half as by2, third as by3 } from './calculator2.mjs';

const res1 = divider.half(10);
const res2 = divider.third(10);

const res3 = by2(10);
const res4 = by3(10);

console.log(res1, res2, res3, res4);

• At the top of the file we are importing the calculator2.mjs module's named exports and assigning them to a namespace called divider: 
• import * as divider from './calculator2.mjs';
• We call the functions using the namespace with the function name: 

• We are also importing calculator2 using destructuring and assigning aliases of by2 and by3 to the half and third functions.
• import { half as by2, third as by3 } from './calculator2.mjs';
• We then call the function with the alias:

• Run it with the Debugger or from the Terminal: node modules/mjs-examples/app-aliases.mjs 
• It should log the results: 5 3.3333333333333335 5 3.3333333333333335

3e. Import/Export statements: Node - set type to module

import calculator from './calculator.js';

const res1 = calculator.double(10);
const res2 = calculator.triple(10);

console.log('Log results from calculator module:', res1, res2);

const calculator = {
  double: (x) => x * 2,
  triple: (x) => x * 3,
};

export default calculator;

{
  "main": "app.js",
  "type": "module"
}

3f. Import/Export statements: Browser - set type to module

• Lastly, we have only been using Node.js examples so far. Let's see how to use modules with the browser.
• Browsers do not recognize the CommonJS require function, so you can only use the import/export statements.

• Duplicate the module-type folder and name the new folder browser.
• Delete the package.json file, leaving only the app.js and calculator.js files.

• Add a very simple index.html file.

<!DOCTYPE html>
<html lang="en">
<body>
  <h1>JavaScript Modules</h1>
<script type="module" src="app.js"></script>
</body>
</html>

• At the bottom of the file is a script tag that will run JavaScript in the Browser when the web page opens. 
• <script type="module" src="app.js" ></script>
• The src source attribute is set to the app.js file. 
• Setting the type attribute to "module" will tell the browser to treat the JavaScript files as modules. 

• To test it we need to launch a local web server. You can use the VS Code text editor and the LiveServer extension. 
• If the index.html file was in the project's root directory we would be ready to launch. But since it is not we need to tell Live Server what file to launch.
• Open the settings.json file in the javascript-tutorial project's root directory, or create one if it doesn't exist. Then change the liveServer.settings.root property to path: "/modules/browser"

settings.json

{
  "liveServer.settings.port": 5500,
  "liveServer.settings.root": "/modules/browser"
}

• Now we are ready to launch the server. Open the index.html file in the text editor, right click anywhere on the index.html page, then select Open With LiveServer.
• It should then automatically open the web page in your browser at URL: http://127.0.0.1:5500/

• The web page will just display the heading "JavaScript Modules".
• The calculator module just logs the results of the method calls to the console. But not to the Terminal's console because we are not running our app with Node.js. We are running it with the Browser. We need to open the browser console using Chrome Developer Tools.
• Right click on the open web page and select Inspect. Then click the console tab. And you should see: "Log results from calculator module: 20 30"