Javascript modules

Translation of the “JavaScript Modules” article from jsmodules.io .

In the new version of JavaScript, a modular system will appear, mainly inspired by the idea of ​​Node.js modules.
In this article I will tell how it will work.

Module creation

As an exercise, we will build a simple asap module that allows you to assign actions to be performed “as soon as right away” in an asynchronous manner. In Node.js, you can do this with the help of process.nextTick , there are also different approaches that work in many browsers. We will create a module that will work in any environment. ^one
')
Start by creating a new file for our module. Let's call it asap.js. The module provides a single function, what is called the default export (default export). You can do the default export with the export default construct.

 var asap; var isNode = typeof process !== "undefined" && {}.toString.call(process) === "[object process]"; if (isNode) { asap = process.nextTick; } else if (typeof setImmediate !== "undefined") { asap = setImmediate; } else { asap = setTimeout; } export default asap; 

Import module

To import asap from another module, we use the following syntax:

 import asap from "asap"; asap(function() { console.log("hello async world!"); }); 

This construct accepts the default function exported by the asap module and stores it in the asap variable, which we can later call.

Named export

Sometimes modules must export a few things that can be used by name.

For example, jQuery has one main export ( jQuery function) and several additional named exports ( ajax , getJSON , animate , etc.). In the Node.js module mkdirp there is a default export that creates a directory and a named export called sync , which does the same, but in sync.

In our case, in addition to the default export, the asap module can also provide a function later , which assigns the execution of the code at the time when other network or UI processes have already occurred.

Our module looks the same, except that we have added a new export declaration.

 var asap; var isNode = typeof process !== "undefined" && {}.toString.call(process) === "[object process]"; if (isNode) { asap = process.nextTick; } else if (typeof setImmediate !== "undefined") { asap = setImmediate; } else { asap = setTimeout; } export default asap; export var later = isNode ? process.setImmediate : asap; 

Named Import

Now that we have exported later , we can import it in another module.

 import { later } from "asap"; later(function() { console.log("Running after other network events"); }); 

For the curious, you can import default exports and named exports with a single import statement:

 import asap, { later } from "asap"; 

And that's all you need to do!

Facilities

Rename Named Import

Sometimes when importing a named export, you need to give it its own local name.

 import { unlink as rm } from "fs"; rm(filename, function(err) { /* check errors */ }); 

Import to namespace

It may be convenient to import all the named exports of a module into a single local namespace ² .

 import * as fs from "fs"; fs.unlink(filename, function(err) { /* check errors */ }); 

Reduced export method

You can make any declaration in JavaScript (for example, var or function ) a named export preceding it with the export keyword.

 // exports this function as "requestAnimationFrame" export function requestAnimationFrame() { // cross-browser requestAnimationFrame } // exports document.location as "location" export var location = document.location; 

This also works for new declarations, such as class or let

 // exports this class as "File" export class File() { /* implementation */ } // exports "0.6.3" as "VERSION" export let VERSION = "0.6.3"; 

These names are also available in the module's local scope, so you can use them in other functions of the module.

Export grouping

You can export any number of local variables with one instruction.

 function getJSON() { // implementation } function postJSON() { // implementation } function animate() { // implementation } 

A group export declaration can be placed anywhere in the file, so you can place the import and export one after another, at the top of the module.

Special features

JavaScript modules have several nice features that simplify their use and refactoring.

• JavaScript modules support delayed binding between modules, both for named export and for export by default. It just works.
• JavaScript modules separate names that exist in the default export (and prototype chains) and other named exports, preventing conflicts.
• With JavaScript modules, it is easier to determine exactly what you are importing just by looking at the syntax. It improves error messages and also simplifies the creation of tools such as browserify or JSHint, which should work reliably.

Notes

¹ For real use this module should be more detailed, but for our example this is enough.
² Translator's note: it seems that the import into the namespace will look like this: module fs from "fs";