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

Давайте теперь разберем синтаксис ES модулей. Они работают аналогично CommonJS модулям, но имеют другой, хоть идейно и похожий синтаксис экспорта и подключения.

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

Итак, пусть в файле с модулем у нас есть некоторые функции:

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

Экспортируем нужные функции наружу с помощью команды export:

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

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

Давайте подключим наш модуль к файлу index.js. Это делается с помощью команд import и from:

import math from './math.js';

После такого подключения в переменной math будет объект с экспортированным функциями. Давайте воспользуемся ими:

import math from './math.js';

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

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

import {square, cube} from './math.js';

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

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

После этого можно вызывать наш сборщик:

npm run build

И теперь можно проверить работу нашего кода:

<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;
}

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

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