В JavaScript модуль является не более чем фрагментом кода, сохраненным в файл. Но, переменные и функции модуля недоступны без их экспорта.

В настоящее время, интерес представляют две модульные системы:

1. модульная система ES6,
2. CommomJS

Модульная система ES6

Несколько лет назад концепции модулей в JavaScript, вообще, не существовало. Ссылаться на другой файл и включать файлы с JS-кодом друг в друга не представлялось возможным. Все изменилось, когда ECMAScript 2015 (ES6) представил свою модульную систему.

В модулях всегда используется режим use strict.

Существует три основных типа экспорта:

1. экспорт по умолчанию (только один на каждый модуль),
2. именованный экспорт (может быть несколько на один модуль),
3. смешанный экспорт.

Экспорт по умолчанию

На каждый модуль (файл) можеть приходиться только один экспорт по умолчанию, имя для которого определяется при импорте.

//--someFunction.js --
export default () => console.log("Hello");

//------ main.js ------
// Вы можете присвоить любое имя
import oneFunc from './someFunction';
oneFunc(); //Hello

.....

//--someFunction.js --
export default someValue = 10;

//------ main2.js ------
// Вы можете присвоить любое имя
import value from './someFunction'; 
console.log(value) //10

Именованный экспорт

Мы можете создать несколько именованных экспортов для каждого модуля (файла), но имя импортируемого модуля должно соответствовать имени экспортируемого модуля. При импорте для таких наименований используются фигурные скобки.

//--someFunction.js --
export const sum = (a,b) => a + b;
export const subtract = (a,b) => a-b;

//-- main.js --
import { sum, subtract } from './someFunction';
console.log(sum(1,2)); // 3
console.log(subtract(2, 1)); // 1

.....

// Импорт всех именованных экспортов в объект
//-- main.js --
import * as myObject from './someFunction';
console.log(myObject.sum(1,2)); // 3
console.log(myObject.subtract(2, 1)); // 1

Смешанный экспорт

//--someFunction.js --
export default () => console.log("Hello"); //*1
export const sum = (a,b) => a + b; //*2
export const subtract = (a,b) => a-b; //*2

//-- main.js --
import sayHello, {sum, subtract } from ./someFunction

1. При импорте вы должны определить имя для экспорта по умолчанию,
2. При импорте именованных экспортов нужно использовать соответствующие имена, не забываю заключить их в фигурные скобки.

Выводы

Для экспорта по умолчанию:

1. при импорте можно установить любое имя,
2. может быть только один экспорт по умолчанию для переменной, функции или класса.

Для именованного экспорта:

1. можно экспортировать множество переменных, функций, классов,
2. при импорте имя всегда должно соответствовать имени, установленном при экспорте.

CommonJS

CommonJS - модульная система для серверного JavaScript, позволяющая инкапсулировать функционал, предоставляя его в дальнейшем другим JavaScript-файлам и библиотекам.

//--someFunction.js --
exports.sum = (a,b) => a+b
exports.a = 1
exports.b = 2

//-- main.js --
const someModule = require('./someFunction.js')
const {a, b} = require('./someFunction.js')

console.log(someModule.sum(1,2) //3
console.log(a, b) //1,2

Спасибо за внимание.

Перевод статьи Kesk Noren “JavaScript Module System”.