Миграция с Create React App

Create React App (CRA) представляет собой преднастроенный инструмент сборки на основе Webpack с ограниченной возможностью прямого изменения конфигурации без eject. Parcel, в свою очередь, является сборщиком с нулевой конфигурацией, ориентированным на автоматическое определение зависимостей и минимизацию ручной настройки.

Ключевое различие заключается в подходе к конфигурации:

  • CRA скрывает конфигурацию Webpack внутри абстракции
  • Parcel формирует граф зависимостей автоматически без явного описания правил сборки
  • CRA требует дополнительных инструментов (react-scripts) для управления процессом сборки
  • Parcel использует встроенную систему трансформаций через плагины и встроенные пресеты

В контексте миграции это приводит к необходимости пересмотра структуры проекта, точек входа и механизмов обработки ассетов.

Структура проекта после перехода

В CRA типичная структура включает src/index.js как точку входа и публичную директорию public с шаблоном HTML. Parcel требует явного указания HTML как точки входа, от которой строится граф зависимостей.

Изменяется принцип организации:

  • HTML-файл становится первичной точкой входа
  • JavaScript подключается через <script type="module">
  • CSS импортируется напрямую из JavaScript или HTML
  • ассеты обрабатываются через систему резолва Parcel

Типовая структура после перехода:

project/
  src/
    index.js
    App.js
    styles.css
  index.html
  package.json

Подготовка зависимостей

Удаление CRA-зависимостей и установка Parcel выполняется через замену react-scripts на parcel.

Основные изменения в зависимостях:

  • удаление react-scripts
  • установка parcel
  • сохранение react, react-dom
  • добавление необходимых плагинов при специфических требованиях (TypeScript, SVG, PostCSS)

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

Изменение точки входа

В CRA точка входа фиксирована и скрыта внутри react-scripts. В Parcel точка входа определяется через HTML-файл.

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Application</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="./src/index.js"></script>
  </body>
</html>

JavaScript начинает выполняться как ESModule, что влияет на:

  • способ импорта зависимостей
  • работу с динамическими импортами
  • обработку сторонних библиотек

Изменение сценариев запуска

CRA использует react-scripts start, build, test. Parcel использует собственные CLI-команды.

Конфигурация package.json изменяется следующим образом:

  • start заменяется на parcel index.html
  • build заменяется на parcel build index.html
  • дополнительный флаг --dist-dir при необходимости управления выходной директорией

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

  • дев-сервер с hot module replacement
  • оптимизацию production-сборки
  • tree-shaking для ES-модулей

Обработка CSS и стилей

CRA использует Webpack loaders для CSS, PostCSS и Sass. Parcel интегрирует обработку стилей без явного описания loaders.

Изменяется способ подключения:

  • CSS импортируется прямо в JS
  • поддерживается автоматическая обработка PostCSS
  • Sass активируется при наличии соответствующего пакета

Пример подключения:

import './styles.css';

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

Работа с переменными окружения

CRA использует REACT_APP_* через встроенный механизм dotenv. Parcel использует стандартный механизм .env с автоматической подстановкой через процесс сборки.

Изменения:

  • .env файл остается
  • префиксы могут не требоваться или настраиваются через плагины
  • доступ к переменным осуществляется через process.env

Обработка статических ресурсов

В CRA статические ресурсы размещаются в public. Parcel использует более гибкую модель:

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

Пример:

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

Parcel преобразует импорт в URL ресурса в финальной сборке.

Замена механизмов тестирования

CRA включает Jest по умолчанию. Parcel не навязывает тестовый стек.

В результате миграции происходит:

  • выделение тестового окружения отдельно от сборщика
  • использование Jest или альтернативных решений независимо от Parcel
  • исключение react-scripts test

Тестовая инфраструктура перестает быть связанной с системой сборки.

Обработка TypeScript

CRA поддерживает TypeScript через встроенную конфигурацию. Parcel поддерживает TypeScript нативно.

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

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

Файлы .ts и .tsx начинают обрабатываться автоматически после установки Parcel.

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

CRA использует Webpack Dev Server. Parcel использует встроенный dev server с HMR.

Характеристики Parcel:

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

Сборка production-версии

В CRA production-сборка запускается через react-scripts build. Parcel использует команду parcel build.

Особенности production-сборки Parcel:

  • минификация JavaScript через встроенные оптимизаторы
  • сжатие CSS без дополнительной настройки
  • code splitting на уровне динамических импортов
  • content hashing для кеширования

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

Разрешение модулей и aliasing

CRA требует настройки alias через Webpack или CRACO. Parcel поддерживает alias через package.json или конфигурационные файлы.

Пример:

{
  "alias": {
    "@components": "./src/components"
  }
}

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

Работа с React-экосистемой

React в CRA интегрирован через react-scripts. В Parcel React подключается как обычная зависимость.

Изменения:

  • JSX трансформация выполняется автоматически
  • Fast Refresh активируется через встроенную поддержку
  • отсутствует привязка к React-specific сборщику

Типичные проблемы при переходе

При миграции наблюдаются системные различия, влияющие на поведение приложения:

  • различие в обработке абсолютных путей
  • изменение логики env-переменных
  • необходимость явного указания entry HTML
  • различие в поведении dev server при проксировании API
  • несовместимость некоторых CRA-специфичных расширений

Роль proxy и API интеграции

CRA использует поле proxy в package.json. Parcel не предоставляет встроенный аналог, поэтому проксирование реализуется через:

  • отдельные dev-server middleware
  • reverse proxy (nginx или аналог)
  • сторонние плагины

Изменяется уровень абстракции между фронтендом и backend-запросами.

Оглавление