CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-parcel-bundler

Blazing fast, zero configuration web application bundler

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

Parcel Bundler

Parcel is a blazing fast, zero configuration web application bundler that provides multicore compilation and intelligent caching. It offers out-of-the-box support for JavaScript, CSS, HTML, and various file assets without requiring plugins, automatically transforms modules using Babel, PostCSS, and PostHTML, and includes built-in support for code splitting via dynamic imports and hot module replacement for development.

Package Information

  • Package Name: parcel-bundler
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install parcel-bundler

Core Imports

const Bundler = require('parcel-bundler');

For ES modules:

import Bundler from 'parcel-bundler';

Basic Usage

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

// Entry file for bundling
const entryFiles = path.join(__dirname, './src/index.html');

// Bundler options
const options = {
  outDir: './dist', // Output directory
  outFile: 'index.html', // Output filename
  publicURL: './', // Public URL path
  watch: true, // Enable file watching
  cache: true, // Enable caching
  minify: false, // Disable minification for development
  target: 'browser', // Build target
  logLevel: 3, // Log level (0-5)
  hmr: true, // Enable hot module replacement
  sourceMaps: true, // Enable source maps
};

// Initialize bundler
const bundler = new Bundler(entryFiles, options);

// Start development server
bundler.serve(1234, false, 'localhost').then(server => {
  console.log('Server started on http://localhost:1234');
});

// Or build for production
bundler.bundle().then(bundle => {
  console.log('Build completed!');
});

Architecture

Parcel is built around several key components:

  • Bundler Class: Main orchestrator that manages the bundling process, asset resolution, and build pipeline
  • Asset System: Extensible asset processing system with 25+ built-in asset types for different file formats
  • Packaging System: Collection of packagers that generate final output bundles for different target types
  • CLI Interface: Command-line tool providing serve, watch, build, and info commands with extensive options
  • Development Tools: Built-in development server with HMR (Hot Module Replacement) and file watching
  • Caching System: Intelligent filesystem caching for fast incremental builds

Capabilities

Programmatic Bundler API

Core Bundler class for programmatic control over the bundling process, including configuration options, lifecycle management, and custom asset/packager registration.

class Bundler extends EventEmitter {
  constructor(entryFiles, options = {});
  addAssetType(extension, path);
  addPackager(type, packager);
  addBundleLoader(type, paths);
  bundle();
  serve(port, https, host);
  middleware();
  start();
  stop();
}

Bundler API

Command Line Interface

Comprehensive CLI tool with commands for development server, file watching, production builds, and environment debugging.

parcel serve [input...]     # Start development server (default)
parcel watch [input...]     # Start bundler in watch mode  
parcel build [input...]     # Build for production
parcel info                 # Print debugging information
parcel help [command]       # Display help information

Command Line Interface

Asset Processing System

Extensible asset processing system supporting 25+ file types including JavaScript variants, stylesheets, markup languages, and data formats with automatic transforms and dependency resolution.

class Asset {
  constructor(name, options);
  load();
  parse(code);
  collectDependencies();
  transform();
  generate();
  addDependency(name, opts);
}

Asset System

Types

// Bundler Options
interface BundlerOptions {
  outDir?: string;           // Output directory (default: 'dist')
  outFile?: string;          // Output filename
  publicURL?: string;        // Public URL path (default: '/')
  watch?: boolean;           // Watch mode
  cache?: boolean;           // Enable caching (default: true)
  cacheDir?: string;         // Cache directory (default: '.cache')
  minify?: boolean;          // Minify output
  target?: string;           // Build target: 'browser', 'node', 'electron'
  bundleNodeModules?: boolean; // Bundle node_modules
  hmr?: boolean;             // Hot module replacement
  https?: boolean | object;  // HTTPS configuration
  sourceMaps?: boolean;      // Generate source maps (default: true)
  logLevel?: number;         // Logging level (0-5)
  autoinstall?: boolean;     // Auto-install dependencies
  scopeHoist?: boolean;      // Scope hoisting/tree shaking
  contentHash?: boolean;     // Content hashing for file names
}

// Bundle representation
interface Bundle {
  type: string;              // Bundle type (js, css, html, etc.)
  name: string;              // Output file path
  assets: Set;               // Set of assets in bundle
  childBundles: Set;         // Set of child bundles
  entryAsset: Asset;         // Main asset for this bundle
}

// Asset representation
interface Asset {
  name: string;              // Absolute file path
  type: string;              // File extension without dot
  contents: string;          // Raw file contents
  ast: object;               // Parsed AST
  dependencies: Map;         // Map of dependencies
  generated: object;         // Generated output per target type
  parentBundle: Bundle;      // Bundle containing this asset
}

Install with Tessl CLI

npx tessl i tessl/npm-parcel-bundler
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/parcel-bundler@1.12.x
Publish Source
CLI
Badge
tessl/npm-parcel-bundler badge