Parcel

Parcel представляет собой сборщик модулей, ориентированный на минимальную конфигурацию и автоматическое управление зависимостями. В связке с картографической библиотекой Leaflet он упрощает организацию проекта, объединяя JavaScript, стили, изображения тайлов и сторонние ресурсы в единый процесс сборки без ручной настройки сложных конфигурационных файлов.

Leaflet активно использует внешние ресурсы: CSS-стили, изображения маркеров, тайловые слои. Parcel позволяет импортировать такие ресурсы напрямую из JavaScript-кода, автоматически обрабатывая их в итоговой сборке.

Инициализация проекта с Parcel

Структура проекта обычно начинается с минимального набора файлов:

project/
 ├── src/
 │    ├── index.js
 │    ├── style.css
 ├── index.html
 ├── package.json

Установка Parcel выполняется как зависимость разработки:

npm install parcel

Инициализация базового JavaScript-модуля:

npm init -y

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

Подключение Leaflet в проект с Parcel

Leaflet устанавливается как npm-зависимость:

npm install leaflet

В JavaScript-файле выполняется импорт библиотеки:

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

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

Создание карты в модуле Parcel

Инициализация карты выполняется стандартным способом Leaflet:

const map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map);

HTML-файл содержит контейнер карты:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Leaflet + Parcel</title>
</head>
<body>
    <div id="map"></div>
    <script src="./src/index.js" type="module"></script>
</body>
</html>

Parcel анализирует type="module" и строит граф зависимостей.

Обработка CSS Leaflet через Parcel

Leaflet требует подключения стилей для корректного отображения карты и маркеров. Parcel позволяет импортировать CSS прямо в Jav * aScript:

import 'leaflet/dist/leaflet.css';

При сборке Parcel:

  • извлекает CSS из node_modules
  • оптимизирует стили
  • внедряет их в итоговый бандл или отдельный файл

Работа с маркерами и изображениями

Одной из частых проблем при использовании Leaflet в сборщиках является корректное отображение иконок маркеров.

Parcel позволяет импортировать изображения напрямую:

import markerIcon from 'leaflet/dist/images/marker-icon.png';
import markerShadow from 'leaflet/dist/images/marker-shadow.png';

Далее переопределяется стандартная иконка:

const DefaultIcon = L.icon({
    iconUrl: markerIcon,
    shadowUrl: markerShadow,
    iconSize: [25, 41],
    iconAnchor: [12, 41]
});

L.Marker.prototype.options.icon = DefaultIcon;

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

Конфигурация карты в структуре модулей

При использовании Parcel код часто разделяется на модули:

src/
 ├── map/
 │    ├── initMap.js
 │    ├── layers.js
 ├── index.js

Инициализация карты выносится в отдельный модуль:

// map/initMap.js
import L from 'leaflet';

export function createMap(containerId) {
    const map = L.map(containerId).setView([40.7128, -74.0060], 12);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap'
    }).addTo(map);

    return map;
}

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

import { createMap } from './map/initMap';

const map = createMap('map');

Parcel автоматически связывает модули в единый граф.

Поддержка горячей перезагрузки (HMR)

Parcel поддерживает Hot Module Replacement без дополнительной настройки. Изменения в коде Leaflet-приложения отражаются на карте без полной перезагрузки страницы.

Пример обновления слоя:

if (module.hot) {
    module.hot.accept();
}

В Leaflet-контексте это позволяет:

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

Работа с геоданными в Parcel-проекте

GeoJSON часто используется совместно с Leaflet. Parcel позволяет импортировать JSON напрямую:

import data from './data/cities.json';

L.geoJSON(data).addTo(map);

Parcel обрабатывает JSON как модуль, включая его в бандл.

Оптимизация сборки Leaflet-приложений

Parcel выполняет ряд автоматических оптимизаций:

  • удаление неиспользуемого кода (tree shaking)
  • сжатие JavaScript и CSS
  • оптимизация ассетов
  • разделение кода на чанки

Пример production-сборки:

parcel build index.html

Результат:

  • минифицированные файлы
  • хэширование ресурсов
  • оптимизированная загрузка тайловых слоёв

Подключение пользовательских слоёв и плагинов

Leaflet-плагины подключаются как обычные npm-модули:

npm install leaflet.markercluster

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

import 'leaflet.markercluster';
import 'leaflet.markercluster/dist/MarkerCluster.css';

const markers = L.markerClusterGroup();
markers.addLayer(L.marker([51.5, -0.09]));
map.addLayer(markers);

Parcel автоматически интегрирует стили и зависимости плагина.

Управление статическими ресурсами

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

  • тайловые изображения
  • иконки слоёв
  • GeoJSON-файлы
  • пользовательские спрайты

Пример импорта изображения:

import iconUrl from './assets/icon.png';

const icon = L.icon({
    iconUrl
});

Работа с несколькими картами

Parcel не накладывает ограничений на количество экземпляров Leaflet. Структурирование кода позволяет создавать несколько карт в одном приложении:

const map1 = L.map('map1').setView([48.8566, 2.3522], 12);
const map2 = L.map('map2').setView([52.5200, 13.4050], 12);

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

Разделение окружений разработки и продакшена

Parcel автоматически различает режимы:

  • development: быстрый rebuild, HMR
  • production: оптимизация и минификация

Переменные окружения:

if (process.env.NODE_ENV === 'development') {
    console.log('dev mode');
}

Интеграция с современными ES-модулями

Leaflet полностью совместим с ES Modules, что позволяет Parcel строить оптимальный граф зависимостей:

import L from 'leaflet';
import { createMap } from './map/initMap';
import './style.css';

Parcel анализирует зависимости статически, минимизируя избыточный код в итоговой сборке.

Обработка ошибок сборки

Parcel выводит диагностические сообщения при ошибках в Leaflet-проекте:

  • неверные пути к ассетам
  • отсутствие CSS Leaflet
  • ошибки импорта модулей
  • конфликты зависимостей плагинов

Ошибки отображаются в терминале и браузере через overlay.

Производительность в связке Parcel + Leaflet

Оптимизация достигается за счёт:

  • ленивой загрузки модулей
  • кеширования ассетов
  • разделения чанков по маршрутам приложения
  • минимизации DOM-операций при инициализации карты

Особенно важно при работе с большим количеством маркеров и слоёв, где Parcel позволяет вынести тяжёлые части логики в отдельные динамические импорты:

import('./heavyLayer.js').then(module => {
    module.addHeavyLayer(map);
});
Оглавление