Этап 5 из 19 · ≈ 3 ч

Модули

Основа с Junior

import и export, ES-модули в браузере и в сборке, динамический импорт.

// math.js
export function sum(a, b) { return a + b; }
export default class Calculator {}

// app.js
import Calculator, { sum } from "./math.js";
const { Chart } = await import("./chart.js");   // загрузить по требованию

Что важно знать

  • ES-модули (import/export) — стандарт; CommonJS (require) — наследие Node.js, встречается в старых пакетах.
  • У модуля своя область видимости и строгий режим; код модуля выполняется один раз, при первом импорте.
  • Импорты статичны — сборщик видит граф зависимостей и выкидывает неиспользуемое (tree shaking).
  • Динамический import() возвращает промис и создаёт отдельный файл сборки — основа разделения кода по маршрутам.
  • В браузере: <script type="module"> — отложенное выполнение как у defer.
  • Именованные экспорты удобнее для рефакторинга и автодополнения, чем default.

Критерии освоения

Junior ≈ 3 ч

  • Использует import и export, именованные и по умолчанию

Практика. Разбить учебный проект на модули с явными импортами.

Middle ≈ 3 ч

  • Объясняет tree shaking и пишет модули без побочных эффектов при импорте
  • Разделяет код через динамический import

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

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Как работают ES-модули — import и export?Junior

Модуль — файл со своей областью видимости: наружу видно только то, что экспортировано. Именованный экспорт export function sum импортируют import { sum } (имя совпадает), default — один на модуль, импортируется под любым именем. Импорты статические (в начале…

Полный разбор
Чем ES-модули отличаются от CommonJS?Junior

CommonJS — исторический формат Node.js: require() и module.exports, загрузка синхронная и динамическая (require можно вызвать где угодно). ES-модули — стандарт языка: import/export, статическая структура, асинхронная загрузка, работают и в браузере, и в…

Полный разбор
Зачем нужен сборщик (Vite, webpack) и что он делает?Junior

Сборщик берёт исходники (модули JS/TS, CSS, картинки, импорты из node_modules) и делает оптимизированные файлы для браузера: склеивает модули, транспилирует TypeScript и JSX, минифицирует, удаляет неиспользуемый код (tree shaking), добавляет хеши в имена для…

Полный разбор
Что такое npm-скрипты и npx?Junior

Раздел scripts в package.json — именованные команды проекта: npm run dev, npm run build, npm test. В скриптах доступны бинарники из node_modules/.bin без указания пути — поэтому инструменты ставят локально в devDependencies, а не глобально: у всех одинаковые…

Полный разбор

Документация

← Вся карта «Frontend-разработчик»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования