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

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

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

// Exporting a default asset
export default function greet(name) {
  console.log(`Hello, ${name}!`);
}

// Importing the default export
import greet from './myModule';

Именованный экспорт

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

// Exporting named assets
export function greet(name) {
  console.log(`Hello, ${name}!`);
}

export function farewell(name) {
  console.log(`Goodbye, ${name}!`);
}

// Importing named exports
import { greet, farewell } from './myModule';

Объединение экспорта по умолчанию и именованного экспорта

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

export default function greet(name) {
  console.log(`Hello, ${name}!`);
}

export function farewell(name) {
  console.log(`Goodbye, ${name}!`);
}

Чтобы импортировать как экспорт по умолчанию, так и именованный экспорт:

import greet, { farewell } from './myModule';

Ключевые моменты, которые следует запомнить

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

Практический пример

Рассмотрим компонент React:

import React from 'react';

export default function Greeting({ name }) {
  return 
Hello, {name}!
;
}

В этом примере компонент «Приветствие» экспортируется как экспорт по умолчанию. Его можно импортировать и использовать в других компонентах:

import Greeting from './Greeting';

function MyComponent() {
  return ;
}

Понимая экспорт и импорт, вы сможете эффективно организовывать и повторно использовать код в своих проектах JavaScript.