Налаштування бандлера 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.