Структура минимального проекта

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

Базовая файловая структура

Типовой минимальный проект включает ограниченное количество сущностей, каждая из которых выполняет строго определённую роль:

project/
├── package.json
├── src/
│   ├── index.html
│   ├── index.js
│   └── styles.css
├── dist/
└── .parcel-cache/

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

package.json как центр конфигурации

Файл package.json задаёт поведение проекта на уровне зависимостей и скриптов запуска. В контексте Parcel он выполняет роль минимального управляющего слоя.

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

  • зависимости (dependencies) — библиотеки, используемые в рантайме;
  • dev-зависимости (devDependencies) — инструменты сборки, включая Parcel;
  • скрипты (scripts) — команды запуска сборки и dev-сервера.

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

{
  "name": "parcel-minimal-project",
  "version": "1.0.0",
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  },
  "devDependencies": {
    "parcel": "^2.0.0"
  }
}

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

Точка входа как основа графа зависимостей

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

HTML-файл становится отправной точкой анализа:

  • подключает JavaScript через <script src="./index.js"></script>;
  • включает стили через <link rel="stylesheet" href="./styles.css">;
  • может ссылаться на изображения и другие ресурсы.

Пример src/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 src="./index.js"></script>
  </body>
</html>

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

JavaScript как центральный модуль приложения

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

Пример структуры src/index.js:

import './styles.css';

const root = document.getElementById('app');

root.textContent = 'Parcel runtime initialized';

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

Стили как модуль первого класса

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

Пример src/styles.css:

body {
  margin: 0;
  font-family: sans-serif;
}

#app {
  padding: 20px;
  color: #222;
}

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

Папка src как зона исходного кода

Каталог src выполняет роль единственного источника истины для исходных файлов. В минимальной структуре он включает:

  • HTML как точку входа;
  • JavaScript как корневую логику;
  • CSS как стилизацию;
  • дополнительные ресурсы (изображения, шрифты).

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

dist как результат сборки

Каталог dist создаётся автоматически после выполнения команды сборки. Его содержимое формируется Parcel и не предназначено для ручного редактирования.

Внутри находятся:

  • минифицированные JS-бандлы;
  • оптимизированные CSS-файлы;
  • обработанные изображения и шрифты;
  • HTML с внедрёнными зависимостями.

Характерная особенность — генерация хешированных имён файлов:

dist/
├── index.html
├── index.8c1a9f.js
├── index.3f2b10.css

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

.parcel-cache и механизм ускорения сборки

Каталог .parcel-cache создаётся автоматически и используется для инкрементальной сборки.

Внутренние функции:

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

Удаление каталога приводит к полной пересборке проекта без потери функциональности.

Минимальный набор зависимостей

В минимальном проекте устанавливается только Parcel как инструмент сборки:

npm install parcel

Дополнительные зависимости добавляются по мере расширения проекта, однако базовая структура остаётся неизменной.

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

При запуске dev-сервера:

parcel src/index.html

выполняются следующие этапы:

  • определение точки входа;
  • построение графа зависимостей;
  • трансформация модулей;
  • запуск локального сервера;
  • подключение HMR (Hot Module Replacement).

При сборке:

parcel build src/index.html

активируются процессы оптимизации:

  • минификация;
  • tree-shaking;
  • код-сплиттинг;
  • генерация production-артефактов.

Связь структуры проекта и графа зависимостей

Структура минимального проекта напрямую отражает модель работы Parcel. Каждый файл в src становится узлом графа, а импорт формирует ребро зависимости.

Иерархия выглядит следующим образом:

index.html
 ├── index.js
 │    └── styles.css

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

Особенности минимализма в архитектуре Parcel

Минимальная структура характеризуется отсутствием следующих компонентов:

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

Функциональность определяется исключительно содержимым исходных файлов и их связями.

Оглавление