Использование в Makefile и shell-скриптах

Роль Parcel в автоматизации сборки

Parcel часто используется как CLI-инструмент, который легко встраивается в существующие системы автоматизации. Его ключевое преимущество в контексте Makefile и shell-скриптов заключается в том, что он не требует сложной конфигурации: большинство сценариев сборки можно выразить одной командой CLI, что делает его удобным для интеграции в классические Unix-инструменты.

В отличие от более тяжёлых систем сборки, Parcel ориентирован на быстрый запуск и минимальную настройку, что позволяет использовать его как «командный блок» внутри Makefile, Bash-скриптов и CI-конвейеров.

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

Makefile остаётся одним из самых простых способов описания задач сборки, особенно в проектах, где важно разделение этапов: установка зависимостей, сборка, тестирование, деплой.

Parcel легко интегрируется в такие сценарии благодаря предсказуемым CLI-командам.

Базовая структура Makefile

install:
    npm install

dev:
    npx parcel src/index.html

build:
    npx parcel build src/index.html

clean:
    rm -rf dist .parcel-cache

Каждая цель соответствует отдельному этапу жизненного цикла проекта:

  • install — установка зависимостей
  • dev — запуск dev-сервера Parcel
  • build — production-сборка
  • clean — очистка артефактов

Разделение dev и production режимов

Parcel автоматически различает режимы через команды serve и build, однако в Makefile часто требуется явное управление параметрами:

dev:
    NODE_ENV=development npx parcel src/index.html --open

build:
    NODE_ENV=production npx parcel build src/index.html --dist-dir build --no-source-maps

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

  • NODE_ENV влияет на оптимизации
  • --dist-dir задаёт выходную директорию
  • --no-source-maps ускоряет production-сборку

Инкрементальная сборка через watch

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

watch:
    npx parcel watch src/index.html

Однако Parcel в режиме serve уже включает watch-поведение, поэтому в большинстве случаев достаточно:

dev:
    npx parcel src/index.html --open

Параллельные задачи

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

dev:
    npx concurrently \
    "npx parcel src/index.html" \
    "npx json-server db.json"

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

  • фронтенд-сборки
  • mock API
  • вспомогательных сервисов

Интеграция Parcel в shell-скрипты

Shell-скрипты обеспечивают более гибкое управление процессом сборки, чем Makefile, особенно когда требуется условная логика, обработка ошибок или динамическая конфигурация.

Базовый build-скрипт

#!/bin/bash

set -e

echo "Установка зависимостей..."
npm install

echo "Очистка старой сборки..."
rm -rf dist .parcel-cache

echo "Сборка проекта..."
npx parcel build src/index.html --dist-dir dist

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

  • set -e прерывает выполнение при ошибке
  • последовательное выполнение шагов обеспечивает предсказуемость
  • очистка кеша Parcel предотвращает артефакты старых сборок

Управление переменными окружения

Parcel активно использует переменные окружения, которые удобно задавать в shell-скриптах.

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

#!/bin/bash

export NODE_ENV=production
export API_URL=https://api.example.com

npx parcel build src/index.html

Parcel автоматически прокидывает process.env в клиентский код при наличии соответствующей конфигурации.

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

В shell-скриптах часто подключается .env:

#!/bin/bash

set -a
source .env
set +a

npx parcel src/index.html

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

Обработка ошибок и надёжность скриптов

В production-скриптах важно контролировать поведение Parcel при ошибках.

Проверка результата выполнения

#!/bin/bash

if ! npx parcel build src/index.html; then
  echo "Ошибка сборки"
  exit 1
fi

Логирование этапов

#!/bin/bash

log() {
  echo "[BUILD] $1"
}

log "Очистка..."
rm -rf dist

log "Сборка Parcel"
npx parcel build src/index.html

log "Готово"

Оптимизация вызова Parcel в CI

В CI-средах (GitHub Actions, GitLab CI, Jenkins) Parcel обычно запускается через shell-скрипты.

Пример CI-скрипта

#!/bin/bash

set -e

npm ci

npx parcel build src/index.html \
  --dist-dir dist \
  --no-cache

Оптимизации:

  • npm ci ускоряет установку зависимостей
  • отключение кеша делает сборку детерминированной
  • использование set -e гарантирует остановку при ошибках

Кеширование Parcel в скриптах

Parcel использует директорию .parcel-cache, которую можно управлять вручную.

Очистка кеша

rm -rf .parcel-cache

Частичная очистка в Makefile

clean-cache:
    rm -rf .parcel-cache

В CI иногда применяется стратегия:

  • сохранять .parcel-cache между сборками
  • удалять только при изменении зависимостей

Динамическая конфигурация сборки

Shell-скрипты позволяют параметризовать Parcel.

Выбор входной точки

#!/bin/bash

ENTRY=${1:-src/index.html}

npx parcel build "$ENTRY"

Запуск:

./build.sh src/admin.html

Переключение режимов

#!/bin/bash

MODE=$1

if [ "$MODE" = "dev" ]; then
  npx parcel src/index.html --open
else
  npx parcel build src/index.html
fi

Интеграция с npm-скриптами через Makefile и shell

Parcel часто используется в связке с npm scripts, но Makefile и shell-скрипты позволяют добавить уровень оркестрации.

Makefile как обёртка npm

dev:
    npm run dev

build:
    npm run build

Где package.json:

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

Shell как расширение npm

#!/bin/bash

npm run build

echo "Копирование статических файлов..."
cp -r public/* dist/

Многоэтапные пайплайны с Parcel

Parcel может быть частью сложного пайплайна сборки.

Пример полного процесса

#!/bin/bash

set -e

echo "1. Установка"
npm ci

echo "2. Линтинг"
npx eslint src

echo "3. Сборка Parcel"
npx parcel build src/index.html --dist-dir dist

echo "4. Постобработка"
npx imagemin dist/assets/* --out-dir dist/assets

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

Управление параллельными процессами

В shell-скриптах часто требуется запуск Parcel вместе с другими сервисами.

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

#!/bin/bash

npx parcel src/index.html &
PARCEL_PID=$!

node server.js &
SERVER_PID=$!

wait $PARCEL_PID $SERVER_PID

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

Логика условных сборок

Shell позволяет гибко управлять сборкой Parcel в зависимости от условий.

Сборка только при изменениях

#!/bin/bash

if git diff --quiet HEAD~1 HEAD -- src; then
  echo "Изменений нет"
  exit 0
fi

npx parcel build src/index.html

Разные конфигурации для окружений

#!/bin/bash

case "$NODE_ENV" in
  development)
    npx parcel src/index.html --open
    ;;
  production)
    npx parcel build src/index.html --dist-dir dist
    ;;
  *)
    echo "Неизвестное окружение"
    exit 1
    ;;
esac

Использование Parcel как части инфраструктуры сборки

В крупных проектах Parcel редко используется изолированно. Он становится компонентом общей системы:

  • Makefile управляет этапами
  • shell-скрипты реализуют логику
  • Parcel выполняет трансформацию и бандлинг
  • CI обеспечивает автоматизацию

Такая архитектура позволяет сохранять предсказуемость сборки при росте сложности проекта, не теряя при этом скорость работы и простоту запуска.

Оглавление