Glob-импорты

Понятие glob-импорта

Glob-импорты представляют собой механизм массового подключения модулей по шаблону пути, основанному на правилах glob. Вместо явного перечисления файлов используется маска, которая описывает группу файлов, подходящих под определённый паттерн.

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

Parcel интерпретирует glob-выражения на этапе сборки и формирует из них единый граф зависимостей, автоматически включая все совпадающие файлы.

Синтаксис glob-выражений

В Parcel glob-импорты выглядят как расширение стандартного импорта:

const modules = import.meta.glob('./modules/*.js');

или в более явной форме через динамический импорт:

const modules = import('./modules/*.js');

В результате сборщик анализирует шаблон и находит все файлы, соответствующие маске ./modules/*.js.

Поддерживаются стандартные glob-символы:

  • * — любое количество символов в пределах одного сегмента пути
  • ** — рекурсивное совпадение по подкаталогам
  • ? — один произвольный символ
  • {a,b} — выбор из нескольких вариантов

Пример:

import modules from './features/**/index.js';

Такой шаблон захватывает все index.js внутри любых поддиректорий каталога features.

Как Parcel обрабатывает glob-импорты

При сборке Parcel выполняет несколько этапов трансформации glob-выражений:

  1. Разбор выражения импорта

    • определяется наличие шаблона glob
    • выделяется базовый путь и маска

  2. Поиск файлов

    • файловая система сканируется по указанному пути
    • отбираются все совпадающие модули

  3. Построение графа зависимостей

    • каждый найденный файл становится отдельной зависимостью
    • Parcel добавляет их в общий dependency graph

  4. Генерация кода загрузки

    • создаётся объект или функция, возвращающая модули
    • в зависимости от режима (lazy/eager)

Результат на выходе — обычный JavaScript-код, где glob-импорт заменяется на структуру данных, содержащую ссылки на модули.

Ленивые и жадные (eager) glob-импорты

Parcel поддерживает два основных режима загрузки glob-модулей.

Ленивый режим

В ленивом режиме модули не загружаются сразу. Вместо этого создаётся функция, возвращающая динамический импорт:

const modules = import('./pages/*.js');

Использование:

modules['Home.js']().then(m => {
  m.render();
});

Каждый модуль загружается только при обращении к нему.

Жадный режим

В жадном режиме все модули импортируются сразу и становятся частью итогового бандла:

const modules = import('./pages/*.js?eager');

Результат представляет собой объект:

{
  "Home.js": Module,
  "About.js": Module
}

Такой подход уменьшает задержки во время выполнения, но увеличивает размер начальной загрузки.

Рекурсивные glob-импорты

Особое значение имеет рекурсивный glob, позволяющий захватывать целые деревья каталогов:

const modules = import('./components/**/*.js');

Такая запись включает:

  • файлы в components
  • файлы в любых вложенных папках
  • все соответствующие .js модули

Parcel строит плоскую карту модулей, где ключами выступают относительные пути.

Структура результата glob-импорта

Результат glob-импорта представляет собой объект, где:

  • ключ — путь к модулю относительно базового каталога
  • значение — модуль или функция его загрузки

Пример структуры:

{
  "./Header.js": Module,
  "./Footer.js": Module,
  "./ui/Button.js": Module
}

При ленивой загрузке:

{
  "./Header.js": () => import('./Header.js'),
  "./Footer.js": () => import('./Footer.js')
}

Практическое применение glob-импортов

Автоматическая регистрация модулей

Часто используется для регистрации плагинов:

const plugins = import('./plugins/*.js');

for (const path in plugins) {
  plugins[path].init?.();
}

Parcel автоматически включает все новые плагины без изменения кода.

Маршрутизация

В системах маршрутизации glob-импорт позволяет автоматически строить карту страниц:

const pages = import('./pages/*.js');

export const routes = Object.keys(pages).map(path => ({
  path: path.replace('.js', '').toLowerCase(),
  component: pages[path]
}));
Подключение UI-компонентов

При построении дизайн-систем:

const components = import('./components/**/*.js');

export function getComponent(name) {
  return components[`./${name}.js`];
}

Ограничения glob-импортов

Несмотря на удобство, glob-импорты имеют ряд особенностей:

  • невозможность динамического формирования пути на этапе выполнения
  • зависимость от файловой структуры проекта
  • необходимость пересборки при добавлении новых файлов
  • потенциальное увеличение размера бандла при eager-загрузке

Parcel решает часть проблем через кеширование и оптимизацию графа зависимостей, но фундаментальная модель остаётся статической.

Влияние glob-импортов на сборку

Использование glob-выражений влияет на работу bundler следующим образом:

  • увеличивается количество узлов в dependency graph
  • растёт время первичного сканирования проекта
  • повышается гибкость кода без ручного управления импортами

При этом Parcel оптимизирует итоговый бандл:

  • выполняется tree-shaking неиспользуемых экспортов
  • применяется code splitting при динамической загрузке
  • минимизируется дублирование зависимостей

Отличия от ручных импортов

Ручные импорты:

import a from './a.js';
import b from './b.js';
import c from './c.js';

Glob-импорт:

const modules = import('./*.js');

Разница заключается в следующих аспектах:

  • масштабируемость структуры
  • автоматическое включение новых файлов
  • снижение количества шаблонного кода
  • смещение логики с уровня кода на уровень файловой системы

Использование с TypeScript и современными модулями

Glob-импорты корректно работают в проектах с TypeScript, при этом типизация результата может потребовать явного описания:

const modules: Record<string, () => Promise<any>> =
  import('./services/*.ts');

В проектах ES Modules структура сохраняется без изменений, так как Parcel транслирует glob-выражение в стандартные динамические импорты.

Оптимизация работы с большим количеством файлов

При работе с сотнями или тысячами файлов glob-импорты становятся инструментом управления сложностью.

Рекомендуется:

  • ограничивать область поиска базовым каталогом
  • избегать слишком широких масок вроде **/*
  • разделять glob-выражения по доменам приложения
  • использовать eager-загрузку только для критически важных модулей

Parcel эффективно распределяет нагрузку, но стоимость анализа файловой системы остаётся значимой при чрезмерно широких масках.

Поведение при изменении структуры проекта

При добавлении нового файла, подходящего под glob-маску:

  • Parcel автоматически обнаруживает его при следующей сборке
  • модуль включается в dependency graph без изменений кода
  • обновляется структура результата glob-импорта

При удалении файла:

  • ссылка исключается из итогового набора модулей
  • предотвращаются “битые” импорты на уровне сборки

Такой подход снижает необходимость ручного сопровождения импортов и уменьшает вероятность ошибок синхронизации структуры проекта.

Оглавление