parcel skill

Overview

This skill provides comprehensive, practical guidance for using the Parcel bundler. It covers zero-configuration setup, asset handling, hot module replacement, and production build optimizations. The guidance focuses on fast iteration, minimal config, and common troubleshooting. Use it to get a working Parcel build quickly or to improve an existing setup.

How this skill works

The skill inspects project needs and recommends the simplest Parcel workflow that meets them: zero-config for basic apps, project-level configuration for advanced cases, or plugin usage for custom asset handling. It explains how Parcel detects entry points, transforms assets, serves with HMR during development, and generates optimized bundles for production. It also outlines configuration file options, CLI commands, and common environment variables.

When to use it

• You need a bundler that works out of the box for small to medium web apps.
• You want fast developer feedback with hot module replacement and a dev server.
• You need to bundle mixed assets (JS, CSS, images, fonts, HTML) with minimal config.
• You want optimized production builds with code splitting and tree shaking without heavy setup.
• You’re migrating from a complex webpack config and want simpler defaults.

Best practices

• Start with Parcel’s zero-config by installing parcel and pointing the CLI to a single HTML or JS entry file.
• Keep source file paths and imports explicit so Parcel can statically analyze dependencies for optimal bundling.
• Use .parcelrc only when you need custom transformers or resolvers; prefer plugins over manual hacks.
• Enable source maps in development and strip them in production builds for smaller output.
• Use environment variables (process.env.NODE_ENV) to switch behavior between dev and prod and to enable minification.
• Cache and clean: rely on Parcel’s cache for speed, but clear .parcel-cache when debugging strange build artifacts.

Example use cases

• Create a quick prototype: npm init -y, install parcel, and run parcel index.html to get HMR and live reload.
• Asset pipeline for static sites: import images and fonts directly in CSS/JS and let Parcel emit hashed output files.
• Single-page app build: configure a single HTML entry and enable history fallback for client-side routing.
• Library bundling: use Parcel’s targets field to produce ESM and CJS builds with minimal config.
• Migrating from webpack: replicate essential loaders with Parcel plugins and remove complex config files.

FAQ