Модули в JavaScript: Понимание и использование

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

Существуют две основные системы модулей, используемые в JavaScript:

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

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

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

Модули ES6 всегда работают в строгом режиме (use strict), что улучшает производительность и предотвращает распространенные ошибки.

Основные типы экспорта в ES6:

• Экспорт по умолчанию (может быть только один на модуль)
• Именованный экспорт (может быть несколько на модуль)
• Смешанный экспорт (комбинация обоих типов)

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

Каждый модуль может иметь только один экспорт по умолчанию, который импортируется под любым именем, заданным разработчиком.

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

//------ main.js ------
// Имя можно выбрать любое
import customName from './someFunction';
customName(); // Hello

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

//------ main2.js ------
import anyName from './someValue';
console.log(anyName); // 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

// Импорт всех именованных экспортов в объект
import * as mathOperations from './someFunction';
console.log(mathOperations.sum(1, 2)); // 3
console.log(mathOperations.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 greet, { sum, subtract } from './someFunction';
greet(); // Hello
console.log(sum(1, 2)); // 3
console.log(subtract(2, 1)); // 1

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

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

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