Введение в модули CommonJS в JavaScript

Начнем изучение модулей с CommonJS. Давайте для примера сделаем какой-нибудь модуль. Например, сделаем модуль math, который будет предоставлять библиотеку функций для математических операций.

Разместим наш модуль в файле math.js и подключим его к файлу index.js.

Файл с модулем

Давайте сделаем наш файл с модулем, разместим в нем какие-нибудь функции:

function square(num) {
	return num * num;
}
function cube(num) {
	return num * num * num;
}

Те функции, которые должны быть видны снаружи модуля, необходимо экспортировать. Это делается путем записи функций в специальный объект module.exports:

function square(num) {
	return num * num;
}
function cube(num) {
	return num * num * num;
}

module.exports.square = square;
module.exports.cube = cube;

Не обязательно записывать отдельные свойства объекта module.exports, можно просто записать в него объект с функциями:

function square(num) {
	return num * num;
}
function cube(num) {
	return num * num * num;
}

module.exports = {square, cube};

А можно записывать в свойства объекта module.exports функции сразу при их создании:

module.exports.square = function(num) {
	return num * num;
}
module.exports.cube   = function (num) {
	return num * num * num;
}

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

Подключение модуля

Давайте подключим наш модуль к файлу index.js. Это делается с помощью команды require, параметром которой указывается путь к модулю. При этом путь обязательно начинать с точки, обозначающей текущую папку:

let math = require('./math');

После такого подключения в переменной math будет тот самый объект, который мы экспортировали наружу. В нашем случае это будет объект с ключами square и cube, значениями которых будут соответствующие функции.

Давайте воспользуемся подключенными функциями:

let math = require('./math');

let res = math.square(2) + math.cube(3);
console.log(res);

При подключении можно выполнить дестуктуризацию объекта и записать наши функции сразу в переменные:

let {square, cube} = require('./math');

let res = square(2) + cube(3);
console.log(res);

При этом не обязательно записывать в переменные все функции из импортированного модуля. Если, к примеру, нам нужна только функция square, то заберем только ее:

let {square} = require('./math');

let res  = square(2);
console.log(res);

Сборка модуля

После создания наши файлов мы можем вызвать сборщик Webpack:

npm run build

Сборщик возьмет файл index.js, отследит какие модули к нему подключаются и все сольет в один файл dist/bundle.js. После этого можно проверить работоспособность нашего кода в браузере:

<html>
	<head>
		<script defer src="bundle.js"></script>
	</head>
	<body>
		...
	</body>
</html>

Практические задачи

Дан следующий код:

function square(num) {
	return num ** 2;
}
function cube(num) {
	return num ** 3;
}
function avg(arr) {
	return sum(arr, 1) / arr.length;
}
function digitsSum(num) {
	return sum(String(num).split(''));
}

// вспомогательная функция
function sum(arr) {
	let res = 0;
	
	for (let elem of arr) {
		res += +elem;
	}
	
	return res;
}

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

С помощью модуля из предыдущей задачи найдите сумму квадрата и куба числа 3. Импортируйте для этого только необходимые функции.