Настройка бандлера Parcel для веб-проекта

Настройка бандлера Parcel для веб-проекта

Parcel — сборщик с нулевой конфигурацией. Указываешь входной файл, остальное он определяет сам: находит зависимости, выбирает трансформеры, настраивает tree-shaking. Это делает его отличным выбором для быстрого старта проекта или прототипа, где не хочется тратить день на конфиг Webpack.

Установка и запуск

npm install --save-dev parcel

# Запуск dev-сервера — просто указываем HTML
npx parcel index.html

# Production-сборка
npx parcel build index.html

Parcel читает index.html, находит все <script>, <link>, изображения, обрабатывает их автоматически. TypeScript, JSX, CSS Modules, PostCSS — всё подхватывается без явной настройки, если стоит нужный пакет.

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

{
  "scripts": {
    "dev": "parcel src/index.html --port 3000",
    "build": "parcel build src/index.html --no-source-maps",
    "clean": "rm -rf dist .parcel-cache"
  },
  "targets": {
    "default": {
      "browsers": "> 0.5%, last 2 versions, not dead",
      "outputFormat": "esmodule",
      "isLibrary": false
    }
  }
}

TypeScript и React

Устанавливаем зависимости — Parcel подхватит их сам:

npm install react react-dom
npm install --save-dev typescript @types/react @types/react-dom

tsconfig.json минимальный:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "skipLibCheck": true
  }
}

После этого parcel src/index.html — и TypeScript работает без дополнительной конфигурации.

CSS Modules

/* Button.module.css */
.root {
  display: inline-flex;
  padding: 8px 16px;
  border-radius: 4px;
}

import styles from './Button.module.css';

export const Button = ({ children }: { children: React.ReactNode }) => (
  <button className={styles.root}>{children}</button>
);

Parcel автоматически обрабатывает .module.css как CSS Modules — хеширует имена классов, типизирует их.

SCSS и PostCSS

npm install --save-dev sass

Достаточно переименовать .css в .scss. Для PostCSS:

npm install --save-dev postcss autoprefixer

.postcssrc:

{
  "plugins": {
    "autoprefixer": {}
  }
}

Сборка библиотеки

Parcel умеет собирать npm-пакеты, читая поля main, module, types из package.json:

{
  "source": "src/index.ts",
  "main": "dist/index.cjs",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "parcel build"
  }
}

Алиасы путей

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

Секция alias в package.json — и импорты вида import { Button } from '@components/Button' работают.

Когда Parcel не подходит

• Нужен детальный контроль над chunk-splitting и именами файлов
• Сложная кастомная логика в сборке (Parcel не предполагает обширного конфига)
• Команда уже хорошо знает Webpack/Vite и переход создаст больше вопросов, чем решит

Сроки

Настройка Parcel для нового React/TypeScript проекта с нуля: 30–60 минут. Миграция существующего проекта с Webpack на Parcel: 2–8 часов в зависимости от количества кастомных настроек Webpack.