Frontend Academy · Урок

ES-модули: import, export и динамический import

«ES-модули: import, export и динамический import» — бесплатный урок Frontend Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Повторение: основы модулей ES

Модули ES предоставляют каждому файлу собственную область видимости. Именованные экспорты передают конкретные значения, а экспорт по умолчанию — основное значение. Сборщик или браузер разрешает импорты во время загрузки.

// Named exports
export const API_BASE = '/api/v1';
export function formatDate(d) { return d.toISOString().slice(0, 10); }

// Default export
export default class ApiClient {
  constructor(base = API_BASE) { this.base = base; }
}

Удаление неиспользуемого кода — зачем нужны именованные экспорты

Сборщики (Rollup, esbuild, Vite) удаляют неиспользуемые экспорты. Если Вы импортируете только { formatDate }, сборщик удаляет всё остальное из сборки. Именованные экспорты позволяют удалять неиспользуемый код, а import * as utils может этому помешать.

// consumers/report.js — only needs formatDate
import { formatDate } from './utils.js';
// Bundler omits API_BASE and ApiClient from this chunk

Динамический import() — отложенная загрузка

Динамический import() возвращает Promise. Модуль загружается только при выполнении этого кода. Сборщики автоматически разделяют такие импорты на отдельные фрагменты.

// Only load the heavy charting library when needed:
const showChart = async () => {
  const { Chart } = await import('./Chart.js');
  new Chart(canvas, config);
};

btn.addEventListener('click', showChart);

Динамический import() с обработкой ошибок

Оберните динамические импорты в try/catch, чтобы корректно обрабатывать сбои сети или отсутствующие модули.

try {
  const module = await import('./optional-feature.js');
  module.activate();
} catch (err) {
  console.warn('Optional feature unavailable:', err.message);
}

import.meta

import.meta содержит метаданные о текущем модуле. Основные свойства: import.meta.url (абсолютный URL), import.meta.env (переменные окружения Vite), import.meta.resolve().

// Get the directory of this module:
const dir = new URL('.', import.meta.url).pathname;

// Vite env vars:
const API_URL = import.meta.env.VITE_API_URL;
const isProd = import.meta.env.PROD;

Выполнение модуля — один раз

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

// store.js — evaluated once
const state = { count: 0 };
export const increment = () => state.count++;
export const getCount = () => state.count;

// Any file that imports from store.js gets the same state instance

Циклические зависимости

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

Импорты только типов в TypeScript

Используйте import type { ... }, чтобы импортировать только типы. Они удаляются во время компиляции и никогда не попадают в итоговую сборку. Это помогает избежать циклических зависимостей, вызванных ссылками только на типы.

import type { User } from './types.js';

function greet(user: User): string {
  return `Hello, ${user.name}`;
}

Повторный экспорт и агрегирующие файлы

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

// components/index.ts
export { Button } from './Button';
export { Input } from './Input';
export type { ButtonProps } from './Button';

// Consumer:
import { Button, Input } from '@/components';

Скрипт type=module в браузере

Добавьте type="module" в тег script, чтобы включить синтаксис модулей ES непосредственно в браузере — без сборщика. Модули по умолчанию откладываются и имеют собственную область видимости.

<script type="module">
  import { greet } from './utils.js';
  greet('World');
</script>

Совместимость CommonJS и ESM

Node.js поддерживает оба формата. Файлы ESM используют расширение .mjs или задают "type": "module" в package.json. При использовании пакетов CommonJS из ESM экспортом по умолчанию становится значение module.exports. Сборщики обрабатывают это прозрачно.

Быстрая проверка

В чём главное преимущество именованных экспортов перед одним объектом, экспортируемым по умолчанию, с точки зрения производительности?

Повторение: углублённое изучение модулей ES

Модули выполняются один раз; все импортирующие их части используют один экземпляр. Удаление неиспользуемого кода исключает ненужные именованные экспорты. Динамический import() обеспечивает отложенную загрузку и разделение кода. import.meta предоставляет контекст модуля. Агрегирующие файлы удобны, но могут мешать удалению неиспользуемого кода. Импорты только типов в TypeScript не создают вывода.

Часто задаваемые вопросы

Урок «ES-модули: import, export и динамический import» бесплатный?

Да — полный текст урока «ES-модули: import, export и динамический import» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «ES-модули: import, export и динамический import»?

Используйте именованные экспорты, экспорты по умолчанию и импорты пространства имён, а также лениво загружайте код с помощью динамического import() для повышения производительности. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «ES-модули: import, export и динамический import»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

ES-модули: import, export и динамический import
npm и package.json: зависимости и скрипты
Vite: сервер разработки и сборка
Основы сборки: tree shaking и разделение кода

← Назад к Frontend Academy