Налаштування бандлера Parcel для веб-проекту: повний гайд

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

Зіткнулися з гальмами збірки на CI? Parcel — збірник з нульовою конфігурацією, який ми успішно використовуємо в проєктах, де швидкість розгортання критичніша за детальний контроль. Вказуєш вхідний файл — решта він визначає сам: знаходить залежності, вибирає трансформери, налаштовує tree-shaking. Наш досвід показує: типовий React-проєкт на Parcel запускається за 15 хвилин, тоді як на Webpack — від години. А при використанні Vite час порівняний, але Parcel виграє в простоті підтримки legacy-коду. Ми провели понад 10 міграцій з Webpack на Parcel, і в середньому швидкість збірки збільшилася на 40%. Збірка проєкту з сотнею компонентів займає 2 секунди проти 5 у Webpack.

Чому Parcel?

Популярні альтернативи — Webpack, Rollup, Vite. У кожної своя ніша. Parcel виграє в сценаріях швидкого старту та прототипування:

• Zero-config — не потрібно писати конфіг для TypeScript, JSX, SCSS, зображень. Усе працює з коробки.
• Автоматичне визначення типів файлів — Parcel сам підключає потрібні трансформери.
• HMR (Hot Module Replacement) — миттєве перезавантаження модулів при змінах.
• Підтримка WebAssembly, Rust, GLSL — без додаткових плагінів.

Згідно з офіційною документацією Parcel, збірник підтримує понад 40 типів файлів без додаткового налаштування.

Як налаштувати Parcel за 5 кроків?

1. Встановіть Parcel та залежності: npm install --save-dev parcel typescript react react-dom @types/react @types/react-dom.
2. Створіть tsconfig.json з цільовим ES2020 та jsx-react.
3. У package.json пропишіть скрипти dev/build та налаштуйте аліаси через секцію alias.
4. Підключіть PostCSS та SCSS: встановіть sass, створіть .postcssrc з autoprefixer.
5. Запустіть npx parcel src/index.html — збірка готова до роботи.

Приклад package.json

{ "scripts": { "dev": "parcel src/index.html --port 3000", "build": "parcel build src/index.html --no-source-maps" }, "targets": { "default": { "browsers": "> 0.5%, last 2 versions, not dead", "outputFormat": "esmodule" } }, "alias": { "@components": "./src/components", "@utils": "./src/utils" } } 

Мінімальний tsconfig.json

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

CSS Modules і PostCSS

Файли .module.css автоматично обробляються як CSS Modules. Для SCSS перейменуйте в .module.scss. PostCSS налаштовується через .postcssrc:

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

Порівняння: Parcel vs Webpack

Чому Parcel швидше Webpack на старті?

Parcel використовує багатопотокову збірку та кешування модулів, що дає приріст швидкості до 2 разів на типових проєктах. На відміну від Webpack, він не вимагає аналізу конфігурації перед першою збіркою — це особливо помітно на проєктах з великою кількістю залежностей.

Що робити, якщо збірка впала?

Найчастіше проблема в кеші — видаліть папку .parcel-cache і перезапустіть збірку. Якщо не допомогло, перевірте, чи всі аліаси дублюються в tsconfig.json. Ми стикалися з 90% подібних помилок при міграції — вони вирішуються за 5 хвилин.

Час налаштування різних сценаріїв

Що входить у налаштування Parcel під ключ

Ми беремо на себе повне налаштування бандлера:

• Аудит поточної збірки — виявлення вузьких місць, аналіз залежностей.
• Конфігурація Parcel — targets, aliases, плагіни (PostCSS, TypeScript, React).
• Оптимізація збірки — tree-shaking, code splitting, завантаження за вимогою (dynamic imports).
• Налаштування HMR — прискорення розробки.
• Документація — опис усіх особливостей конфігурації.
• Навчання команди — як користуватися новою збіркою.
• Підтримка — 2 тижні після здачі для вирішення можливих проблем.

Терміни та гарантії

Налаштування Parcel для нового React/TypeScript проєкту з нуля — від 30 хвилин. Міграція існуючого проєкту з Webpack на Parcel — від 2 до 8 годин залежно від кількості кастомних налаштувань Webpack. Ми даємо гарантію на працездатність збірки — у разі помилок на етапі деплою виправляємо безкоштовно. Зв'яжіться з нами для консультації — оцінимо ваш проєкт за 1 робочий день. Замовте налаштування Parcel під ваш проєкт і отримайте збільшення швидкості збірки на 30-50%.

Типові помилки при налаштуванні Parcel

• Не налаштований browserslist — Parcel використовує defaults, що може призвести до невірних трансформацій.
• Змішування .css і .module.css — для глобальних стилів використовуйте звичайний .css, для компонентів — .module.css.
• Проблеми з аліасами — обов'язково пропишіть їх у tsconfig.json для підтримки TypeScript.
• Кешування — при зміні конфігурації видаліть .parcel-cache.