Parcel

3.0.0 verified Sat Apr 25 auth: no javascript

Parcel is a zero-configuration web application bundler with a focus on speed. Current stable version is v2.16.4 (as of release notes). It features multicore compilation, filesystem caching, and automatic transpilation (Babel, PostCSS, PostHTML) without plugins. It supports code splitting via dynamic import, hot module replacement, and includes a development server. Parcel differentiates itself from Webpack and Browserify by requiring no configuration for most projects. It is actively maintained with frequent releases (multiple minor versions per year). It uses Rust-based transformers for HTML/SVG as of v2.15.0.

Common errors

error Cannot find module 'parcel-bundler' ↓

cause Package is not installed or installed in a wrong directory.

fix

Run 'npm install --save-dev parcel-bundler' in your project root.

error Couldn't find a bundler for file type: .vue ↓

cause Parcel does not have built-in support for Vue single-file components.

fix

Install a Parcel Vue plugin: 'npm install --save-dev @parcel/transformer-vue'

error ENOENT: no such file or directory, open '.../node_modules/parcel-bundler/src/builtins/bundle-url.js' ↓

cause Corrupted node_modules: missing Parcel built-in files.

fix

Delete node_modules and run 'npm install'.

Warnings

gotcha Parcel uses filesystem caching by default; stale caches can cause incorrect builds after upgrading. ↓

fix Delete the .cache directory before building after a major upgrade: rm -rf .cache && parcel build

breaking Parcel v2 is a complete rewrite from v1. Old plugins and configurations are not compatible. ↓

fix Migrate from v1 to v2: remove deprecated options and use @parcel/config-default or custom configs. See migration guide.

deprecated The parcel-bundler npm package deprecated in favor of parcel with separate packages (e.g., @parcel/core). The package still works but is not recommended for new projects. ↓

fix Use the parcel package directly: npm install --save-dev parcel && parcel build

gotcha Parcel does not support all CommonJS patterns; it expects ESM-like imports for proper tree-shaking. ↓

fix Use ES module syntax (import/export) in your source files for best results.

breaking In v2.15.0, Rust-based HTML/SVG transformer replaced the previous JS implementation, potentially causing different output for custom HTML handling. ↓

fix Review HTML minification and transform results; test with updated Parcel.

Install

npm install parcel-bundler-vue

yarn add parcel-bundler-vue

pnpm add parcel-bundler-vue

Imports

Parcel
wrong
```
import { Parcel } from 'parcel-bundler'
```
correct
```
import Parcel from 'parcel-bundler'
```
Default import; the package exposes a single class as default export.

BundleResult

wrong

import { BundleResult } from 'parcel-bundler'

correct

import type { BundleResult } from 'parcel-bundler'

BundleResult is a TypeScript type, use type import.

ParcelOptions

wrong

const { ParcelOptions } = require('parcel-bundler')

correct

import type { ParcelOptions } from 'parcel-bundler'

ParcelOptions is an interface; use type import in TypeScript.

Quickstart

Basic usage of Parcel bundler: create a bundler instance for an HTML entry point and run a build programmatically.

const Parcel = require('parcel-bundler');
const path = require('path');

// Single entry point
const file = path.join(__dirname, 'index.html');

// Initialize bundler using a file path and options
const bundler = new Parcel(file, {
  outDir: './dist',
  publicUrl: './',
  watch: false,
  cache: true,
  cacheDir: '.cache',
  contentHash: true,
  global: 'myModule',
  minify: false,
  scopeHoist: false,
  target: 'browser',
  bundleNodeModules: false,
  logLevel: 3,
  hmr: false,
  hmrHostname: '',
  hmrPort: 0,
  sourceMaps: false,
  detailedReport: false,
  autoinstall: false,
});

bundler.bundle().then(() => console.log('Build complete!'));