Zero configuration web application bundler with blazing fast performance and comprehensive dev server
npx @tessl/cli install tessl/npm-parcel@2.15.00
# Parcel
1
2
Parcel is a blazing fast, zero configuration web application bundler designed for modern web development. Built with performance in mind, it features a JavaScript compiler written in Rust for native performance, parallel processing using worker threads, and comprehensive caching to avoid rebuilding unchanged code.
3
4
## Package Information
5
6
- **Package Name**: parcel
7
- **Package Type**: npm
8
- **Language**: JavaScript/TypeScript
9
- **Installation**: `npm install -g parcel` or `npm install --save-dev parcel`
10
11
## Core Usage
12
13
Parcel is a CLI-only tool that provides zero-configuration bundling through command-line interface:
14
15
```bash
16
# Start development server (default command)
17
parcel index.html
18
19
# Build for production
20
parcel build index.html
21
22
# Watch mode without dev server
23
parcel watch index.html
24
25
# Get help
26
parcel help
27
```
28
29
## Basic Usage
30
31
```bash
32
# Install Parcel globally
33
npm install -g parcel
34
35
# Create a simple HTML file
36
echo '<html><body><script src="./app.js"></script></body></html>' > index.html
37
echo 'console.log("Hello Parcel!");' > app.js
38
39
# Start development server
40
parcel index.html
41
# ✨ Built in 123ms
42
# Server running at http://localhost:1234
43
44
# Build for production
45
parcel build index.html
46
# ✨ Built in 456ms
47
# dist/index.html 1.23 KB 123ms
48
# dist/app.js 2.45 KB 0ms
49
```
50
51
## Architecture
52
53
Parcel operates as a command-line tool that orchestrates the build process through several key components:
54
55
- **CLI Interface**: Command-line commands (`serve`, `watch`, `build`, `help`) that accept various options
56
- **Development Server**: Built-in dev server with hot module replacement for development workflow
57
- **Build Pipeline**: Production build system with optimizations like minification and tree-shaking
58
- **File System Watcher**: Monitors file changes for automatic rebuilds in development
59
- **Configuration System**: Zero-config approach with optional configuration files
60
61
## Capabilities
62
63
### Development Server
64
65
Start a development server with hot module replacement for rapid development workflow.
66
67
```bash { .api }
68
parcel serve [input...]
69
# or simply:
70
parcel [input...]
71
72
# Common options:
73
# --port <port> Set server port (default: 1234)
74
# --host <host> Set host to listen on
75
# --https Serve files over HTTPS
76
# --cert <path> Path to HTTPS certificate
77
# --key <path> Path to HTTPS private key
78
# --open [browser] Auto-open in browser
79
# --public-url <url> Path prefix for absolute URLs
80
# --lazy [includes] Build async bundles on demand, when requested in the browser
81
# --lazy-exclude <excludes> Can only be used with --lazy. Exclude from lazy building
82
# --watch-for-stdin Exit when stdin closes
83
```
84
85
**Usage Examples:**
86
87
```bash
88
# Basic development server
89
parcel index.html
90
91
# Custom port and host
92
parcel serve src/index.html --port 3000 --host 0.0.0.0
93
94
# HTTPS development server
95
parcel index.html --https --cert ./cert.pem --key ./key.pem
96
97
# Auto-open in default browser
98
parcel index.html --open
99
100
# Lazy loading for large applications
101
parcel index.html --lazy "src/pages/**/*.js"
102
103
# Lazy loading with exclusions
104
parcel index.html --lazy --lazy-exclude "src/critical/**/*.js"
105
```
106
107
### Production Build
108
109
Bundle application for production with optimizations enabled.
110
111
```bash { .api }
112
parcel build [input...]
113
114
# Common options:
115
# --no-optimize Disable minification
116
# --no-scope-hoist Disable scope-hoisting
117
# --public-url <url> Path prefix for absolute URLs
118
# --no-content-hash Disable content hashing
119
# --dist-dir <dir> Output directory
120
# --target [name] Build specific targets
121
```
122
123
**Usage Examples:**
124
125
```bash
126
# Basic production build
127
parcel build index.html
128
129
# Custom output directory
130
parcel build src/index.html --dist-dir build
131
132
# Disable optimizations for debugging
133
parcel build index.html --no-optimize --no-scope-hoist
134
135
# Build for specific targets
136
parcel build index.html --target web --target node
137
138
# Custom public URL for CDN deployment
139
parcel build index.html --public-url https://cdn.example.com/
140
```
141
142
### Watch Mode
143
144
Monitor files for changes and rebuild automatically without development server.
145
146
```bash { .api }
147
parcel watch [input...]
148
149
# Common options:
150
# --public-url <url> Path prefix for absolute URLs
151
# --no-content-hash Disable content hashing
152
# --watch-for-stdin Exit when stdin closes
153
154
# HMR options (same as serve command):
155
# --no-hmr Disable hot module replacement
156
# --hmr-port <port> Hot module replacement port
157
# --hmr-host <host> Hot module replacement host
158
```
159
160
**Usage Examples:**
161
162
```bash
163
# Basic watch mode
164
parcel watch index.html
165
166
# Watch with custom settings
167
parcel watch src/index.html --no-content-hash --public-url /assets/
168
```
169
170
### Help System
171
172
Get help information for commands and options.
173
174
```bash { .api }
175
parcel help [command]
176
177
# Examples:
178
parcel help # General help
179
parcel help serve # Help for serve command
180
parcel help build # Help for build command
181
```
182
183
## Global Options
184
185
These options are available across all commands:
186
187
### Cache & Performance
188
189
```bash { .api }
190
# Cache control
191
--no-cache # Disable filesystem cache
192
--cache-dir <path> # Set cache directory (default: .parcel-cache)
193
194
# Performance monitoring
195
--profile # Enable sampling build profiling
196
--trace # Enable build tracing
197
--detailed-report [count] # Print asset timings and sizes
198
```
199
200
### File Watching
201
202
```bash { .api }
203
# Watch configuration
204
--watch-dir <path> # Set root watch directory (defaults to nearest lockfile or source control dir)
205
--watch-ignore [paths] # Directories to ignore (comma-separated, defaults to '.git,.hg')
206
--watch-backend <name> # Set watcher backend
207
# Choices: brute-force, watchman, fs-events, inotify, windows
208
```
209
210
### Build Configuration
211
212
```bash { .api }
213
# Configuration
214
--config <path> # Specify config path or package name
215
--no-source-maps # Disable sourcemaps
216
--target [name] # Build specific targets (can be used multiple times)
217
--no-autoinstall # Disable automatic dependency installation
218
```
219
220
### Hot Module Replacement
221
222
```bash { .api }
223
# HMR configuration (serve/watch commands)
224
--no-hmr # Disable hot module replacement
225
--hmr-port <port> # Hot module replacement port
226
--hmr-host <host> # Hot module replacement host
227
```
228
229
### Logging & Reporting
230
231
```bash { .api }
232
# Logging
233
--log-level <level> # Set log level
234
# Choices: none, error, warn, info, verbose
235
236
# Reporting
237
--reporter <name> # Additional reporters (can be used multiple times)
238
```
239
240
### Feature Flags
241
242
```bash { .api }
243
# Feature flags
244
--feature-flag <name=value> # Set feature flag values
245
# Format: --feature-flag name=true
246
# Available flags: exampleFeature, useWatchmanWatcher
247
```
248
249
### Version Information
250
251
```bash { .api }
252
# Version
253
-V, --version # Output version number
254
```
255
256
## Entry Point Discovery
257
258
Parcel automatically discovers entry points based on file extensions and content:
259
260
- **HTML files**: `index.html`, `src/index.html`
261
- **JavaScript/TypeScript**: `index.js`, `main.js`, `app.js`, `src/index.ts`
262
- **Package.json**: Uses `main`, `module`, or `browser` fields
263
- **Multiple entries**: `parcel build src/*.html` for multiple pages
264
265
## Target Environments
266
267
Parcel supports multiple build targets:
268
269
- **Web browsers**: Modern ES modules and legacy compatibility
270
- **Node.js**: Server-side applications and utilities
271
- **Electron**: Desktop applications
272
- **Web Workers**: Background processing scripts
273
274
## Configuration Files
275
276
While zero-config by default, Parcel supports optional configuration:
277
278
- `.parcelrc`: Main configuration file
279
- `package.json`: Browserslist, source fields
280
- `tsconfig.json`: TypeScript configuration
281
- `postcss.config.js`: PostCSS configuration
282
283
## Error Handling
284
285
Parcel provides detailed error messages and diagnostics:
286
287
- **Build errors**: Syntax errors, missing dependencies, type errors
288
- **Runtime errors**: Hot reload error overlay in development
289
- **Performance warnings**: Bundle size, unused dependencies
290
- **Detailed stack traces**: Source map support for debugging
291
292
## Runtime Controls
293
294
While Parcel is running, these keyboard shortcuts are available:
295
296
```bash { .api }
297
# Keyboard shortcuts during runtime
298
Ctrl+C # Graceful exit
299
Ctrl+E # Toggle profiling
300
Ctrl+Y # Take heap snapshot
301
```
302
303
## Environment Variables
304
305
Parcel recognizes several environment variables:
306
307
- `NODE_ENV`: Automatically set based on command (`development` for serve/watch, `production` for build)
308
- `PORT`: Default port for development server (defaults to 1234)
309
- `HMR_PORT`: Default HMR port
310
- `HMR_HOST`: Default HMR host
311
- `CI`: When detected, disables autoinstall for build command
312
- `PARCEL_BUILD_ENV`: Internal build environment control
313
314
## Port Behavior
315
316
Parcel handles ports intelligently:
317
318
- **Default port**: 1234 or value from `$PORT` environment variable
319
- **Port occupied**: Automatically finds next available port
320
- **User-specified port**: Fails if port is not available (no auto-discovery)
321
- **HMR port**: Separate port for hot module replacement (from `$HMR_PORT`)
322
323
## Mode Detection
324
325
Parcel automatically sets the build mode:
326
327
- **Production mode**: `parcel build` command (enables optimizations)
328
- **Development mode**: `parcel serve` and `parcel watch` commands (enables debugging features)