You are an expert in Parcel, the zero-configuration build tool for the web. Follow these guidelines when working with Parcel projects.
project/
├── src/
│ ├── index.html # HTML entry point
│ ├── index.js # JavaScript entry
│ ├── styles.css # Stylesheets
│ └── assets/ # Images, fonts, etc.
├── dist/ # Build output (auto-generated)
├── .parcelrc # Optional configuration
└── package.json
# Development with hot reload
parcel src/index.html
# Production build
parcel build src/index.html
{
"scripts": {
"dev": "parcel src/index.html",
"build": "parcel build src/index.html",
"clean": "rm -rf dist .parcel-cache"
},
"source": "src/index.html"
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="app"></div>
<script type="module" src="./index.js"></script>
</body>
</html>
parcel build src/index.js --dist-dir lib
parcel build src/index.html src/admin.html
Parcel supports out of the box:
.js, .jsx, .ts, .tsx, .mjs.css, .scss, .sass, .less, .styl.html, .htm{
"extends": "@parcel/config-default",
"transformers": {
"*.svg": ["@parcel/transformer-svg-react"]
},
"reporters": ["...", "parcel-reporter-bundle-analyzer"]
}
{
"targets": {
"main": {
"source": "src/index.js",
"distDir": "dist",
"context": "browser",
"outputFormat": "esm"
}
}
}
Parcel handles TypeScript automatically. Just use .ts or .tsx files.
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "bundler",
"jsx": "react-jsx",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"isolatedModules": true
}
}
// Parcel handles JSX automatically
import { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}
import './styles.css';
import * as styles from './Button.module.css';
function Button() {
return <button className={styles.primary}>Click me</button>;
}
import './styles.scss';
Parcel installs sass automatically when you use .scss files.
import logo from './logo.png';
import data from './data.json';
// Use in JSX
<img src={logo} alt="Logo" />
const imageUrl = new URL('./image.png', import.meta.url);
// Automatic code splitting
const LazyComponent = React.lazy(() => import('./LazyComponent'));
// Or manual
async function loadModule() {
const module = await import('./heavy-module.js');
return module.default;
}
Parcel automatically creates shared bundles for code used across multiple entry points.
# .env
API_URL=https://api.example.com
# .env.production
API_URL=https://api.production.com
const apiUrl = process.env.API_URL;
{
"targets": {
"default": {
"publicUrl": "/my-app/"
}
}
}
parcel src/index.html
# Serves at http://localhost:1234
parcel src/index.html --port 3000
parcel src/index.html --https
{
"devServer": {
"proxy": {
"/api": {
"target": "http://localhost:8080"
}
}
}
}
parcel build src/index.html
parcel build src/index.html --dist-dir build --public-url /app/
parcel build src/index.html --no-source-maps
Parcel automatically:
npm install -D parcel-reporter-bundle-analyzer
# Add to .parcelrc
{
"extends": "@parcel/config-default",
"reporters": ["...", "parcel-reporter-bundle-analyzer"]
}
Parcel uses aggressive caching:
# Clear cache
rm -rf .parcel-cache
# Or
parcel build --no-cache
{
"name": "my-library",
"source": "src/index.ts",
"main": "dist/main.js",
"module": "dist/module.js",
"types": "dist/types.d.ts",
"targets": {
"main": {
"outputFormat": "commonjs"
},
"module": {
"outputFormat": "esmodule"
},
"types": {
"source": "src/index.ts"
}
}
}
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./index.tsx"></script>
</body>
</html>
parcel build src/*.html
const worker = new Worker(new URL('./worker.js', import.meta.url), {
type: 'module'
});
rm -rf .parcel-cache dist
parcel build --log-level verbose
DEBUG=parcel:* parcel build
.png, .jpg, .gif, .svg, .webp.woff, .woff2, .ttf, .otf, .eot.json, .yaml, .toml, .xml.wasm
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).