Модули и ES6: импорт и экспорт кода в JavaScript

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

Экспорт кода

Чтобы сделать переменные, функции или классы доступными для импорта в других модулях, используйте ключевые слова export или export default.

// Модуль, который экспортирует переменную
export const myVariable = 42;

// Модуль, который экспортирует функцию
export function myFunction() {
  // ...
}

// Модуль, который экспортирует класс
export class MyClass {
  // ...
}

// Модуль, который экспортирует по умолчанию
const defaultExport = 'Это экспорт по умолчанию';
export default defaultExport;

Импорт кода

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

// Импорт переменной из другого модуля
import { myVariable } from './модуль.js';

// Импорт функции из другого модуля
import { myFunction } from './модуль.js';

// Импорт класса из другого модуля
import { MyClass } from './модуль.js';

// Импорт экспорта по умолчанию
import defaultExport from './модуль.js';

Импорт всего модуля

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

import * as myModule from './модуль.js';

console.log(myModule.myVariable);
myModule.myFunction();
const instance = new myModule.MyClass();

Алиасы и переименование при импорте

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

import { myVariable as alias } from './модуль.js';

import { myFunction as renamedFunction } from './модуль.js';

Использование экспорта по умолчанию

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

// В модуле экспорт по умолчанию
const defaultExport = 'Экспорт по умолчанию';
export default defaultExport;

// При импорте можно использовать любое имя
import alias from './модуль.js';

Работа с модулями в ES6 делает ваш код более организованным, читаемым и позволяет легко разделять функциональность. Это особенно важно в больших проектах, где модульная структура облегчает сопровождение и разработку.