Modules

Contact Us or call 1-877-932-8228
Modules

Modules

It's easy to overwrite variables and functions in JavaScript. Really easy. Because most of the JavaScript we write gets executed in a web browser in a single global context, avoiding conflicts between same-named variables can be a challenge. One strategy to address this concern is modules, a feature introduced (in this fashion) in ES2015.

Modules have existed in JavaScript for a while; the CommonJS and Asynchronous Module Definition (AMD) API standards both offered a way for JavaScript developers to use modules. ES2015 brings the module feature into the language officially.

Browser Support for ES2015 Modules

Unforunately, no current browser supports ES2015 modules. But given the importance of modules, we give a brief overview of the concepts here - and offer examples of both ES2015 code (which won't work natively) and examples transpiled into ES5 code, which will work. (Transpiling is the process of converting source code of one language or version of a language into another language/version. Please see https://en.wikipedia.org/wiki/Source-to-source_compiler for more information.)

Module Overview

A module in ES2015 is a file that exports something - functions, constants, etc. - for importing by other files. Modules have their own scope, meaning that they don't share the global scope; you have to import anything needed in the module explicitly. As a result, the contents of each module is, of course, modular: self-contained and free from any possible side effects from conflicts with other code.

As a simple example, consider a file mod1.js that contains the following code:

export const val = 1234;
export function doubleIt(x) {
	return 2 * x;
}

export function tripleIt(x) {
	return 3 * x;
}

Our module defines a constant (val) and two functions, doubleIt and tripleIt. In this example, we're using named exports, in which we prefix each declaration with the export keyword.

We might use the resources created in our mod1.js module in another JavaScript file named main.js:

import { val, doubleIt } from './mod1';
document.write(val);
document.write(doubleIt(4));

The import statement at the top of main.js allows us to use the val constant and doubleIt function from the mod1.js module. We can then use resources just as if they were declared in main.js itself. We could have, of course, chosen to import all of the exported items in main.js from mod1.js:

import { val, doubleIt, tripleIt } from 'mod1';
//...

We can also import all of the module's exports and refer to them using property notation:

import * as mod1 from './mod1';
document.write(mod1.val);
document.write(mod1.doubleIt(4));

In the module, we can change the name of the export in mod1.js:

const val = 1234;
export {val as VAL1};

which we then import using that name:

import { VAL1 } from './mod1';
//...

Similarly, we can import under a different name; in main.js, this would be:

import { VAL1 as THEVAL } from './mod1';
document.write(THEVAL);

Modules also allow for default exports in which we export a single value, often a constructor for a class with one model per module. A module can pick a default export - only one per module file, where the entire module "is" a single function. Here's mod1.js:

export default function () { ... };

We can then make use of the exported function in main.js with the following code:

import mod1 from 'mod1';
mod1();

Modules Example

As discussed above, ES2015 modules syntax isn't supported by any current browsers. But we can make use of the TypeScript transpiler and the webpack module bundler to convert ES2015 module code into ES5 compatible JavaScript. (See https://www.typescriptlang.org/ and https://webpack.github.io/, respectively, for more information.)

Check out the files in the directory AdvancedObjects/Demos/modules/ to view our example. The ES2015 module is the file module1.ts; the ".ts" file extension indicates that this is a TypeScript (a superset of JavaScript) file. Our module exports a single function, randomInt:

export function randomInt(fromNum, toNum) {
	return Math.floor(Math.random() * toNum) + fromNum;
}

The JavaScript file app.ts (again, a TypeScript file) imports the function from the module:

import { randomInt } from './module1';

var random = randomInt(0, 100);
console.log(random);

We import the function randomInt from the module, call the function, and write the value to the console.

To transpile each TypeScript file (module1.ts, app.ts) to their equivalent JavaScript file (module1.js, app.js), we run the following from the command line from inside the modules directory:

tsc module1.ts
tsc app.ts

We use webpack to bundle the code into bundle.js; to do this, we run the following from the command line:

npm install

to load the needed dependency, webpack. We then run the following from the command line to update bundle.js:

node_modules/.bin/webpack app.js bundle.js

We can then open index.html in a browser to run the code.

Given the lack of current browser support for ES2015 modules, we need to do considerable work to get our code to work! But given that modules are an important feature in future front-end development, we think it worth it for you to be exposed to this functionality.

Next