Модули JavaScript – это способ организации и повторного использования кода JavaScript. Использование модулей позволяет разбить код на более мелкие, управляемые части, которые затем можно импортировать и использовать в других частях приложения по мере необходимости. Этот модульный подход помогает поддерживать чистоту кодовой базы, упрощает отладку и повышает возможность повторного использования кода.

Модули ES против CommonJS

В экосистеме JavaScript существуют разные модульные системы. Модули ES (ESM) — это стандарт спецификации ECMAScript, используемый в основном в браузере и все чаще поддерживаемый в Node.js. CommonJS — еще одна система модулей, которая традиционно использовалась в Node.js.

ES-модули (ESM)

Модули ES (ESM) — это стандартизированная система модулей JavaScript, представленная в ECMAScript 2015 (ES6). Они обеспечивают лучшую организацию и возможность повторного использования кода, позволяя импортировать и экспортировать функции, объекты и примитивы между разными файлами. Эта система модулей широко поддерживается в современных средах JavaScript, включая браузеры и Node.js.

Экспорт и импорт

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

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

//modules.js
const greet = () => {
   console.log('Hello World');
};
export { greet};

При импорте именованных экспортированных файлов необходимо использовать те же имена, что и у экспортированных файлов.

import { greet } from './module.js';
greet(); // Hello, World!

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

//modules.js
const greet = () => {
   console.log('Hello World');
};
export default greet;

При импорте экспорта по умолчанию вы можете использовать любое имя.

import message  from './module.js';
message(); // Hello, World!

Использование модулей в HTML

При использовании модулей в браузере вам необходимо включить их в свой HTML-файл. Вы используете атрибут type="module" в теге

Поддержка браузера

Современные браузеры изначально поддерживают модули JavaScript. Сюда входят Chrome, Firefox, Safari, Edge и Opera. Однако старые браузеры, такие как Internet Explorer, не поддерживают модули. Для этого вам может потребоваться использовать сборщик, такой как Webpack, или транспилятор, такой как Babel.

Использование модулей в Node.js
Чтобы использовать ES-модули в Node.js, вы можете использовать расширение файла .mjs или установить «type»: «module» в файле package.json.

// package.json
{
 "type": "module"
}

Импортировать псевдонимы

Псевдонимы в модулях JavaScript позволяют импортировать и экспортировать функции, используя разные имена. Это может быть полезно для предотвращения конфликтов имен или для предоставления более описательных имен в контексте модуля, который их импортирует.

// math.js
export function add(a, b) {
   return a   b;
}
 export function subtract(a, b) {
   return a - b;
}

Вы можете импортировать эти функции под разными именами, используя псевдонимы:

// main.js
import { add as sum, subtract as diff } from './math.js';


console.log(sum(2, 3)); // 5
console.log(diff(5, 3)); // 2

Импорт всего модуля как псевдонима

Вы можете импортировать весь модуль как один псевдоним, что позволит вам получить доступ ко всем экспортам в одном пространстве имен.

// main.js
import * as math from './math.js';


console.log(math.add(2, 3)); // 5
console.log(math.subtract(5, 3)); // 2

Динамический импорт

Вы также можете динамически импортировать модули с помощью функции import(), которая возвращает обещание. Это полезно для разделения кода и отложенной загрузки.

// main.js
const loadModule = async () => {
   try {
     const module = await import('./math.js');
     console.log(module.add(2, 3));
   } catch (error) {
     console.error('loading error:', error);
   }
 };


 loadModule();

В этом примере модуль math.js загружается динамически при вызове функции loadModule.

CommonJS (CJS)

CommonJS — это система модулей, которая в основном используется в Node.js. Это была система модулей по умолчанию до того, как модули ES были стандартизированы, и до сих пор широко используется во многих проектах Node.js. Он использует require() для импорта модулей и модуль.exports или экспорт для экспорта функций из модуля.

В CommonJS и модуль.exports, и экспорт используются для экспорта значений из модуля. По сути, экспорт является сокращением для модуля.exports, что позволяет использовать любой из них. Однако обычно рекомендуется использовать модуль.exports последовательно, чтобы избежать потенциальной путаницы или неожиданного поведения.

В этом примере модульу.exports назначена функция, поэтому вызов require в app.js возвращает эту функцию.

// greet.js
module.exports = function(name) {
   return `Hello, ${name}!`;
};

// app.js
const greet = require('./greet');
console.log(greet('Alice')); // 'Hello, Alice!'

В этом примере экспорт используется для добавления свойств в модуль.exports. Вызов require в app.js возвращает объект с функциями сложения и вычитания.

// math.js
exports.add = function(a, b) {
   return a   b;
};
exports.subtract = function(a, b) {
   return a - b;
};

// app.js
const math = require('./math');
console.log(math.add(2, 3)); // 5
console.log(math.subtract(5, 2)); // 3

Модули JavaScript предлагают множество преимуществ, которые улучшают организацию, удобство сопровождения и производительность кода.

• Повторное использование
  Модули позволяют вам писать многократно используемые фрагменты кода, которые можно импортировать и использовать в разных частях вашего приложения или даже в разных проектах.

• Удобство обслуживания
  Разбивая код на более мелкие автономные модули, вы можете более эффективно управлять и поддерживать свою кодовую базу. Это упрощает обновление, рефакторинг и отладку отдельных модулей, не затрагивая все приложение.

• Разделение кода
  Модули позволяют разделять код, что позволяет загружать только необходимый код, когда это необходимо, сокращая начальное время загрузки и повышая общую производительность.

• Улучшенное тестирование
  Модульный код легче тестировать, поскольку вы можете тестировать отдельные модули изолированно. Это приводит к более надежным и удобным в сопровождении тестам.

• Встряхивание дерева
  Современные упаковщики модулей, такие как Webpack и Rollup, могут выполнять встряхивание дерева — метод, который удаляет неиспользуемый код из окончательного пакета, в результате чего код становится меньше и эффективнее.

Заключение

В разработке JavaScript внедрение ES-модулей ознаменовало значительный отход от традиционной системы модулей CommonJS. Модули ES предлагают стандартизированный и эффективный способ управления зависимостями и улучшения удобства обслуживания. Синтаксис экспорта и импорта обеспечивает ясный и лаконичный способ определения и использования модулей, способствуя лучшей организации и читабельности базы кода.