ES6 модули упрощают работу с большими JavaScript-файлами, позволяя разбить их на меньшие, связанные между собой с помощью операторов import и export. Несмотря на появление в ECMAScript 2015, полная поддержка ES6 модулей браузерами всё ещё не универсальна.
Работа ES6 модулей
Модули позволяют создавать несколько JavaScript-файлов, например, first.js и second.js.
В first.js можно определить функцию:
export function myFunction() {
// тело функции
}
Эту функцию импортируем в second.js:
import { myFunction } from './first.js';
Это пример именованного экспорта (export function myFunction) и именованного импорта (import { myFunction }). Имя функции в импорте должно совпадать с именем в экспорте. Это правило распространяется и на переменные.
Экспорт по умолчанию
Можно использовать экспорт по умолчанию:
export default function() {
// тело функции
}
Здесь допустимы анонимные функции. При импорте можно использовать любое имя:
import myFunction from './first.js';
Обратите внимание на отсутствие фигурных скобок. Возможна комбинация экспорта по умолчанию и именованных экспортов.
Необходимость модулей
Хотя код можно разделить на файлы без модулей, используя теги <script> в HTML, при большом количестве файлов это неудобно. ES6 модули позволяют указать ссылку на один файл (например, second.js).
Необходимо учитывать, что браузеры не всегда поддерживают ES6 модули. Требуется module bundler, например, Webpack. Он собирает импортированные функции и переменные в один файл, а также позволяет создавать отдельные бандлы для разных страниц, загружая только необходимые функции.
ES6 модули обеспечивают удобную организацию кода в больших JavaScript-проектах. Несмотря на необходимость module bundler для работы в браузерах, преимущества в удобстве разработки и сопровождения кода значительно перевешивают этот недостаток.