0
# Parcel Config Default
1

2
Parcel Config Default provides the complete default configuration for Parcel bundler, defining the entire build pipeline including transformers, optimizers, packagers, and runtime components. This configuration package enables Parcel's zero-configuration approach by providing sensible defaults for modern web development workflows.
3

4
## Package Information
5

6
- **Package Name**: @parcel/config-default
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Installation**: `npm install @parcel/config-default`
10
- **License**: MIT
11

12
## Core Imports
13

14
**Configuration file usage** (most common):
15

16
The package is typically referenced in Parcel configuration files:
17

18
**.parcelrc**:
19
```json
20
{
21
  "extends": "@parcel/config-default"
22
}
23
```
24

25
**With customizations**:
26
```json
27
{
28
  "extends": "@parcel/config-default",
29
  "validators": {
30
    "*.{js,jsx,ts,tsx}": ["@parcel/validator-eslint"] 
31
  },
32
  "optimizers": {
33
    "*.js": ["@parcel/optimizer-esbuild"]
34
  }
35
}
36
```
37

38
**Programmatic usage** (advanced):
39

40
```javascript
41
const defaultConfig = require("@parcel/config-default");
42
// defaultConfig contains the complete configuration object
43
```
44

45
```typescript
46
import defaultConfig from "@parcel/config-default";
47
// TypeScript usage for accessing configuration programmatically
48
```
49

50
## Basic Usage
51

52
Create a `.parcelrc` file in your project root to use the default configuration:
53

54
```json
55
{
56
  "extends": "@parcel/config-default"
57
}
58
```
59

60
This provides comprehensive support for:
61
- JavaScript/TypeScript with Babel and SWC
62
- CSS preprocessors (Sass, Less, Stylus, PostCSS)
63
- Template languages (Pug, Vue SFC, React JSX)
64
- Data formats (JSON, YAML, TOML, XML)
65
- Images and assets (PNG, JPG, SVG, WebP)
66
- Specialized formats (GLSL, GraphQL, MDX, WebAssembly)
67

68
## Architecture
69

70
The configuration is structured around Parcel's plugin architecture:
71

72
- **Transformers**: Convert source files to standardized formats
73
- **Bundler**: Groups related assets into output bundles
74
- **Resolvers**: Locate and resolve module dependencies
75
- **Packagers**: Combine transformed assets into final bundle files
76
- **Optimizers**: Minify and optimize production builds
77
- **Compressors**: Apply compression algorithms to outputs
78
- **Namers**: Determine output file naming strategies
79
- **Runtimes**: Inject runtime code for features like HMR
80
- **Reporters**: Handle build progress and completion events
81

82
## Capabilities
83

84
### Configuration Structure
85

86
The complete configuration interface exported by the package.
87

88
```typescript { .api }
89
interface ParcelConfigDefault {
90
  bundler: string;
91
  transformers: Record<string, string[]>;
92
  namers: string[];
93
  runtimes: string[];
94
  optimizers: Record<string, string[]>;
95
  packagers: Record<string, string>;
96
  compressors: Record<string, string[]>;
97
  resolvers: string[];
98
  reporters: string[];
99
}
100
```
101

102
**Configuration Object**:
103
```json { .api }
104
{
105
  "bundler": "@parcel/bundler-default",
106
  "transformers": { /* 55+ file patterns mapped to transformer pipelines */ },
107
  "namers": ["@parcel/namer-default"],
108
  "runtimes": ["@parcel/runtime-rsc", "@parcel/runtime-js", "@parcel/runtime-browser-hmr", "@parcel/runtime-service-worker"],
109
  "optimizers": { /* file patterns mapped to optimizer pipelines */ },
110
  "packagers": { /* file patterns mapped to packager plugins */ },
111
  "compressors": { "*": ["@parcel/compressor-raw"] },
112
  "resolvers": ["@parcel/resolver-default"],
113
  "reporters": ["@parcel/reporter-dev-server"]
114
}
115
```
116

117
### Bundler Configuration
118

119
Specifies the bundling strategy used to group assets.
120

121
```json { .api }
122
{
123
  "bundler": "@parcel/bundler-default"
124
}
125
```
126

127
### Transformer Mappings
128

129
Maps file patterns to transformer plugin pipelines for processing different file types.
130

131
```json { .api }
132
{
133
  "transformers": {
134
    "types:*.{ts,tsx}": ["@parcel/transformer-typescript-types"],
135
    "bundle-text:*": ["...", "@parcel/transformer-inline-string"],
136
    "data-url:*": ["...", "@parcel/transformer-inline-string"],
137
    "worklet:*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": ["@parcel/transformer-worklet", "..."],
138
    "react-static:*": ["@parcel/transformer-react-static", "..."],
139
    "*.mdx": ["@parcel/transformer-mdx", "@parcel/transformer-js"],
140
    "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
141
      "@parcel/transformer-babel",
142
      "@parcel/transformer-js",
143
      "@parcel/transformer-react-refresh-wrap"
144
    ],
145
    "*.{json,json5}": ["@parcel/transformer-json"],
146
    "*.jsonld": ["@parcel/transformer-jsonld"],
147
    "*.toml": ["@parcel/transformer-toml"],
148
    "*.webmanifest": ["@parcel/transformer-webmanifest"],
149
    "webmanifest:*.{json,webmanifest}": ["@parcel/transformer-webmanifest"],
150
    "*.{yaml,yml}": ["@parcel/transformer-yaml"],
151
    "*.{glsl,vert,frag}": ["@parcel/transformer-glsl"],
152
    "*.{gql,graphql}": ["@parcel/transformer-graphql"],
153
    "*.{styl,stylus}": ["@parcel/transformer-stylus"],
154
    "*.{sass,scss}": ["@parcel/transformer-sass"],
155
    "*.less": ["@parcel/transformer-less"],
156
    "*.{css,pcss}": ["@parcel/transformer-postcss", "@parcel/transformer-css"],
157
    "*.sss": ["@parcel/transformer-sugarss"],
158
    "*.{htm,html,xhtml}": ["@parcel/transformer-posthtml", "@parcel/transformer-html"],
159
    "*.pug": ["@parcel/transformer-pug"],
160
    "*.coffee": ["@parcel/transformer-coffeescript"],
161
    "*.elm": ["@parcel/transformer-elm"],
162
    "*.vue": ["@parcel/transformer-vue"],
163
    "template:*.vue": ["@parcel/transformer-vue"],
164
    "script:*.vue": ["@parcel/transformer-vue"],
165
    "style:*.vue": ["@parcel/transformer-vue"],
166
    "custom:*.vue": ["@parcel/transformer-vue"],
167
    "*.{png,jpg,jpeg,webp,gif,tiff,avif,heic,heif}": ["@parcel/transformer-image"],
168
    "*.svg": ["@parcel/transformer-svg"],
169
    "*.{xml,rss,atom}": ["@parcel/transformer-xml"],
170
    "*.node": ["@parcel/transformer-node"],
171
    "url:*": ["...", "@parcel/transformer-raw"]
172
  }
173
}
174
```
175

176
**Key Transform Patterns:**
177
- `"..."` - Extends existing transformer pipeline
178
- `"types:*"` - TypeScript type-only files
179
- `"bundle-text:*"` - Text content for bundling
180
- `"data-url:*"` - Data URL transformations
181
- `"worklet:*"` - Web Worker and Worklet files
182
- `"react-static:*"` - React static site generation
183
- `"webmanifest:*"` - Web app manifest processing
184
- `"url:*"` - URL imports and references
185

186
### Optimizer Configurations
187

188
Maps file patterns to optimization plugin pipelines for production builds.
189

190
```json { .api }
191
{
192
  "optimizers": {
193
    "data-url:*": ["...", "@parcel/optimizer-data-url"],
194
    "*.css": ["@parcel/optimizer-css"],
195
    "*.{html,xhtml}": ["@parcel/optimizer-html"],
196
    "*.{js,mjs,cjs}": ["@parcel/optimizer-swc"],
197
    "*.svg": ["@parcel/optimizer-svg"],
198
    "*.{jpg,jpeg,png}": ["@parcel/optimizer-image"]
199
  }
200
}
201
```
202

203
### Packager Assignments
204

205
Maps file patterns to packager plugins that combine assets into final bundles.
206

207
```json { .api }
208
{
209
  "packagers": {
210
    "react-static:*.html": "@parcel/packager-react-static",
211
    "*.{html,xhtml}": "@parcel/packager-html",
212
    "*.css": "@parcel/packager-css",
213
    "*.{js,mjs,cjs}": "@parcel/packager-js",
214
    "*.svg": "@parcel/packager-svg",
215
    "*.{xml,rss,atom}": "@parcel/packager-xml",
216
    "*.ts": "@parcel/packager-ts",
217
    "*.wasm": "@parcel/packager-wasm",
218
    "*.{jsonld,svg,webmanifest}": "@parcel/packager-raw-url",
219
    "*": "@parcel/packager-raw"
220
  }
221
}
222
```
223

224
### Namer Configuration
225

226
Specifies plugins that determine output file naming strategies.
227

228
```json { .api }
229
{
230
  "namers": ["@parcel/namer-default"]
231
}
232
```
233

234
### Runtime Plugins
235

236
Defines runtime code injection for different environments and features.
237

238
```json { .api }
239
{
240
  "runtimes": [
241
    "@parcel/runtime-rsc",
242
    "@parcel/runtime-js", 
243
    "@parcel/runtime-browser-hmr",
244
    "@parcel/runtime-service-worker"
245
  ]
246
}
247
```
248

249
**Runtime Components:**
250
- `@parcel/runtime-rsc` - React Server Components support
251
- `@parcel/runtime-js` - Core JavaScript runtime features
252
- `@parcel/runtime-browser-hmr` - Hot Module Replacement for browsers
253
- `@parcel/runtime-service-worker` - Service Worker integration
254

255
### Compressor Settings
256

257
Defines compression strategies for bundle outputs.
258

259
```json { .api }
260
{
261
  "compressors": {
262
    "*": ["@parcel/compressor-raw"]
263
  }
264
}
265
```
266

267
### Resolver Configuration
268

269
Specifies module resolution strategies for dependency lookup.
270

271
```json { .api }
272
{
273
  "resolvers": ["@parcel/resolver-default"]
274
}
275
```
276

277
### Reporter Configuration
278

279
Defines build progress and completion reporting plugins.
280

281
```json { .api }
282
{
283
  "reporters": ["@parcel/reporter-dev-server"]
284
}
285
```
286

287
### Extension and Customization
288

289
The configuration supports extension through the `extends` field and allows selective overrides:
290

291
```json
292
{
293
  "extends": "@parcel/config-default",
294
  "transformers": {
295
    "*.js": ["@custom/transformer", "..."]
296
  },
297
  "optimizers": {
298
    "*.js": ["@custom/optimizer"]
299
  }
300
}
301
```
302

303
**Extension Patterns:**
304
- Base configuration is loaded first
305
- Custom configurations are merged on top
306
- Array values can use `"..."` to extend existing pipelines
307
- Object values completely replace base configuration sections
308

309
## Dependencies
310

311
### Core Dependencies
312

313
The configuration depends on 24 core Parcel plugins:
314

315
- **Bundling**: `@parcel/bundler-default`
316
- **Compression**: `@parcel/compressor-raw`
317
- **Naming**: `@parcel/namer-default`
318
- **Optimization**: `@parcel/optimizer-css`, `@parcel/optimizer-html`, `@parcel/optimizer-image`, `@parcel/optimizer-svg`, `@parcel/optimizer-swc`
319
- **Packaging**: `@parcel/packager-css`, `@parcel/packager-html`, `@parcel/packager-js`, `@parcel/packager-raw`, `@parcel/packager-svg`, `@parcel/packager-wasm`
320
- **Reporting**: `@parcel/reporter-dev-server`
321
- **Resolution**: `@parcel/resolver-default`
322
- **Runtime**: `@parcel/runtime-browser-hmr`, `@parcel/runtime-js`, `@parcel/runtime-rsc`, `@parcel/runtime-service-worker`
323
- **Transformation**: `@parcel/transformer-babel`, `@parcel/transformer-css`, `@parcel/transformer-html`, `@parcel/transformer-image`, `@parcel/transformer-js`, `@parcel/transformer-json`, `@parcel/transformer-node`, `@parcel/transformer-postcss`, `@parcel/transformer-posthtml`, `@parcel/transformer-raw`, `@parcel/transformer-react-refresh-wrap`, `@parcel/transformer-svg`
324

325
### Extended Dependencies
326

327
Additional plugins for specialized file types (loaded on demand):
328

329
- **CSS Preprocessors**: `@parcel/transformer-sass`, `@parcel/transformer-less`, `@parcel/transformer-stylus`, `@parcel/transformer-sugarss`
330
- **Template Languages**: `@parcel/transformer-pug`, `@parcel/transformer-vue`
331
- **Programming Languages**: `@parcel/transformer-coffeescript`, `@parcel/transformer-elm`, `@parcel/transformer-typescript-types`
332
- **Data Formats**: `@parcel/transformer-toml`, `@parcel/transformer-yaml`, `@parcel/transformer-xml`, `@parcel/transformer-jsonld`
333
- **Specialized**: `@parcel/transformer-glsl`, `@parcel/transformer-graphql`, `@parcel/transformer-webmanifest`, `@parcel/transformer-worklet`, `@parcel/transformer-react-static`, `@parcel/transformer-inline-string`
334
- **Packaging**: `@parcel/packager-react-static`, `@parcel/packager-ts`, `@parcel/packager-xml`, `@parcel/packager-raw-url`
335
- **Optimization**: `@parcel/optimizer-data-url`
336

337
### Optional Dependencies
338

339
- `@parcel/transformer-mdx` - MDX (Markdown + JSX) support for backward compatibility
340

341
## Peer Dependencies
342

343
Requires `@parcel/core` version `^2.15.4` for proper integration with the Parcel build system.