Создание проекта с нуля

Создание проекта с использованием Parcel начинается с подготовки базовой структуры Node.js-проекта. В основе лежит файл package.json, который описывает зависимости, скрипты и конфигурацию сборки.

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

npm init -y

После выполнения команды создаётся минимальный package.json, содержащий стандартные поля проекта.

Ключевые элементы на этом этапе:

  • идентификатор проекта;
  • версия;
  • точка входа;
  • конфигурация скриптов (пока пустая);
  • лицензия.

Установка Parcel

Parcel представляет собой сборщик модулей с минимальной конфигурацией. Он устанавливается как dev-зависимость, поскольку используется только в процессе разработки и сборки.

npm install --save-dev parcel

После установки становится доступна CLI-команда parcel, используемая для запуска dev-сервера и сборки проекта.

Важно учитывать:

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

Структура проекта

Типичная структура проекта с Parcel строится вокруг входной точки, чаще всего HTML-файла.

Пример базовой структуры:

project/
├── package.json
├── src/
│   ├── index.html
│   ├── index.js
│   ├── styles.css
│   └── assets/
│       └── logo.png

Роль директорий

  • src/ — основная директория исходного кода;
  • index.html — точка входа для Parcel;
  • index.js — основной JavaScript-модуль;
  • assets/ — статические ресурсы.

Parcel автоматически отслеживает зависимости, начиная с HTML-файла.

Создание HTML-точки входа

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

Пример index.html:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <title>Parcel проект</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div id="app"></div>

    <script type="module" src="./index.js"></script>
  </body>
</html>

Особенности:

  • подключение JavaScript через type="module" позволяет использовать ES Modules;
  • CSS подключается напрямую без дополнительных загрузчиков;
  • Parcel анализирует зависимости из HTML автоматически.

Точка входа JavaScript

Файл index.js является корневым модулем приложения.

Пример базового содержимого:

import "./styles.css";

const app = document.getElementById("app");

app.textContent = "Parcel работает";

Parcel автоматически:

  • собирает импортируемые модули;
  • обрабатывает CSS импорт;
  • преобразует код при необходимости (Babel, PostCSS и др.).

Подключение стилей

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

Вариант через Jav * aScript:

import "./styles.css";

Пример styles.css:

body {
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  margin: 0;
}

#app {
  padding: 20px;
  font-size: 18px;
}

Parcel автоматически:

  • обрабатывает CSS как модуль;
  • добавляет горячую замену стилей (HMR);
  • минифицирует стили при production-сборке.

Работа с ассетами

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

Пример использования изображения:

import logo from "./assets/logo.png";

const img = document.createElement("img");
img.src = logo;

document.body.appendChild(img);

Механизм работы:

  • Parcel анализирует импорт;
  • копирует файл в output-директорию;
  • подставляет оптимизированный путь.

Поддерживаются:

  • изображения (png, jpg, webp, svg);
  • шрифты;
  • медиафайлы;
  • JSON.

Скрипты npm

Для управления Parcel используется раздел scripts в package.json.

Пример конфигурации:

{
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  }
}

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

npm run dev

Особенности dev-режима:

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

Production-сборка

npm run build

В режиме сборки:

  • выполняется минификация;
  • удаляются dev-инструменты;
  • оптимизируются ассеты;
  • генерируются хешированные имена файлов.

Внутренняя модель работы Parcel

Parcel строит граф зависимостей начиная с entry-файла. Каждый импорт становится узлом графа.

Процесс включает:

  1. анализ HTML как входной точки;
  2. обход импортов JS, CSS и ассетов;
  3. трансформация модулей;
  4. упаковка в оптимизированные бандлы.

Особенность архитектуры:

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

Горячая замена модулей (HMR)

Parcel поддерживает Hot Module Replacement без дополнительной настройки.

Пример поведения:

  • изменение CSS мгновенно обновляет стили;
  • изменение JS приводит к перезагрузке только затронутого модуля;
  • состояние приложения сохраняется при поддерживаемых конфигурациях.

Пример кода с поддержкой HMR:

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

Хотя в большинстве случаев Parcel обрабатывает HMR автоматически.

Обработка современных JavaScript-фич

Parcel использует встроенные трансформеры для поддержки современного JavaScript.

Поддерживаются:

  • ES Modules;
  • async/await;
  • optional chaining;
  • nullish coalescing;
  • динамические импорты.

Пример динамического импорта:

button.addEventListener("click", async () => {
  const module = await import("./lazy.js");
  module.init();
});

Parcel автоматически выделяет такой код в отдельный бандл.

Обработка HTML как модуля

HTML в Parcel рассматривается как полноценный модуль.

Возможности:

  • импорт CSS и JS;
  • ссылки на ассеты;
  • автоматическое переписывание путей;
  • поддержка вложенных HTML-файлов.

Пример вложенности:

<link rel="stylesheet" href="./styles.css" />
<script type="module" src="./index.js"></script>

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

Минимальная конфигурация и расширяемость

Parcel работает по принципу zero-config, однако поддерживает расширение через конфигурационные файлы при необходимости.

Основные сценарии расширения:

  • настройка Babel через .babelrc;
  • конфигурация PostCSS через postcss.config.js;
  • использование .parcelrc для кастомных трансформеров.

Пример .parcelrc:

{
  "extends": "@parcel/config-default"
}

Поведение кэширования

Parcel активно использует кэширование для ускорения сборки.

Особенности:

  • инкрементальная пересборка;
  • сохранение результатов трансформации;
  • хеширование модулей;
  • повторное использование неизменённых частей графа.

Это особенно заметно в больших проектах, где повторные сборки выполняются значительно быстрее первоначальных.

Поддержка многопоточности

Parcel использует worker threads для параллельной обработки модулей.

Этапы, выполняемые параллельно:

  • трансформация JavaScript;
  • обработка CSS;
  • оптимизация ассетов;
  • генерация бандлов.

Это снижает время сборки при увеличении количества файлов.

Оглавление