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

cli.mddocs/

Command Line Interface

The Parcel CLI provides a comprehensive command-line interface for building, serving, and debugging web applications. It offers commands for development server, file watching, production builds, and environment debugging.

Installation

npm install -g parcel-bundler

Or use locally:

npx parcel <command>

Capabilities

Serve Command

Starts a development server with hot module replacement and file watching.

parcel serve [input...]

# Aliases (serve is the default command)
parcel [input...]

Options:

-p, --port <port>           # Port to serve on (default: 1234)
--host <host>               # Host to listen on (default: all interfaces)
--hmr-port <port>           # Port for HMR websockets (default: random)
--hmr-hostname <hostname>   # Hostname for HMR websockets
--https                     # Serve files over HTTPS
--cert <path>               # Path to certificate for HTTPS
--key <path>                # Path to private key for HTTPS
--open [browser]            # Auto-open in browser (default browser)
--no-hmr                    # Disable hot module replacement
-d, --out-dir <path>        # Output directory (default: 'dist')
-o, --out-file <filename>   # Output filename for entry point
--public-url <url>          # Public URL to serve on (default: '/')
--global <variable>         # Expose module through global variable
--no-cache                  # Disable filesystem cache
--no-source-maps            # Disable sourcemaps
--no-autoinstall            # Disable autoinstall
-t, --target <target>       # Runtime: 'node', 'browser', 'electron'
--bundle-node-modules       # Force bundling node modules
--log-level <level>         # Log level: 0-5 (0=silent, 5=debug)
--cache-dir <path>          # Cache directory (default: '.cache')

Usage Examples:

# Basic development server
parcel index.html
parcel serve index.html

# Custom port and host
parcel index.html -p 3000 --host 0.0.0.0

# HTTPS with custom certificates
parcel index.html --https --cert ./cert.pem --key ./key.pem

# Multiple entry points
parcel index.html about.html --port 8080

# Target Node.js environment
parcel server.js --target node

# Disable HMR and caching
parcel index.html --no-hmr --no-cache

# Production-like build with serve
parcel index.html --no-source-maps --log-level 1

Watch Command

Starts the bundler in watch mode without a development server.

parcel watch [input...]

Options:

-d, --out-dir <path>        # Output directory (default: 'dist')
-o, --out-file <filename>   # Output filename for entry point
--public-url <url>          # Public URL (default: '/')
--global <variable>         # Expose module through global variable
--hmr-port <port>           # Port for HMR websockets
--hmr-hostname <hostname>   # Hostname for HMR websockets
--https                     # Use HTTPS for HMR connections
--cert <path>               # Path to certificate for HTTPS
--key <path>                # Path to private key for HTTPS
--no-hmr                    # Disable hot module replacement
--no-cache                  # Disable filesystem cache
--no-source-maps            # Disable sourcemaps
--no-autoinstall            # Disable autoinstall
-t, --target <target>       # Runtime: 'node', 'browser', 'electron'
--bundle-node-modules       # Force bundling node modules
--log-level <level>         # Log level: 0-5
--cache-dir <path>          # Cache directory (default: '.cache')

Usage Examples:

# Watch mode for continuous building
parcel watch index.html

# Watch with custom output
parcel watch src/index.js -d build -o app.js

# Watch for Node.js target
parcel watch server.js --target node --out-dir lib

# Watch multiple files
parcel watch index.html admin.html --out-dir dist

# Watch with specific HMR configuration
parcel watch index.html --hmr-port 3001 --https

Build Command

Bundles files for production with optimizations enabled.

parcel build [input...]

Options:

-d, --out-dir <path>              # Output directory (default: 'dist')
-o, --out-file <filename>         # Output filename for entry point
--public-url <url>                # Public URL (default: '/')
--global <variable>               # Expose module through global variable
--no-minify                       # Disable minification
--no-cache                        # Disable filesystem cache
--no-source-maps                  # Disable sourcemaps
--no-autoinstall                  # Disable autoinstall
--no-content-hash                 # Disable content hashing
--experimental-scope-hoisting     # Enable scope hoisting/tree shaking
-t, --target <target>             # Runtime: 'node', 'browser', 'electron'
--bundle-node-modules             # Force bundling node modules
--detailed-report [depth]         # Print detailed build report (default: 10)
--log-level <level>               # Log level: 0-5
--cache-dir <path>                # Cache directory (default: '.cache')

Usage Examples:

# Production build
parcel build index.html

# Build with custom output
parcel build src/index.js -d dist -o bundle.js

# Build for Node.js
parcel build server.js --target node --out-dir lib

# Build with scope hoisting
parcel build index.html --experimental-scope-hoisting

# Build without minification for debugging
parcel build index.html --no-minify --no-content-hash

# Build with detailed report
parcel build index.html --detailed-report 15

# Build multiple entry points
parcel build index.html admin.html --out-dir public

# Build library with global export
parcel build src/lib.js --global MyLibrary --target browser

Info Command

Prints debugging information about the local environment.

parcel info

Output Includes:

  • Operating system and CPU information
  • Node.js, npm, and Yarn versions
  • Browser versions (Chrome, Edge, Firefox, Safari)
  • Local and global parcel-bundler installation details

Usage Examples:

# Get environment information
parcel info

# Example output:
# Environment Info:
#   System:
#     OS: macOS 10.15.7
#     CPU: (8) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
#   Binaries:
#     Node: 14.17.0
#     Yarn: 1.22.10
#     npm: 6.14.13
#   Browsers:
#     Chrome: 91.0.4472.114
#     Firefox: 89.0.1
#     Safari: 14.1.1
#   npmPackages:
#     parcel-bundler: 1.12.5

Help Command

Display help information for commands.

parcel help [command]

Usage Examples:

# General help
parcel help
parcel --help

# Command-specific help
parcel help serve
parcel help build
parcel help watch

# Show all available options for a command
parcel serve --help
parcel build --help

Global Options

Options available for all commands:

-V, --version               # Output version number
--help                      # Display help information

Common Usage Patterns

Development Workflow:

# Start development
parcel index.html

# Watch mode without server
parcel watch index.html

# Production build
parcel build index.html

Multi-Entry Applications:

# Serve multiple pages
parcel serve index.html admin.html dashboard.html -p 3000

# Build SPA with multiple entry points
parcel build index.html --out-dir dist

Library Development:

# Development
parcel serve src/index.js --target browser --global MyLib

# Build for distribution
parcel build src/index.js --target browser --global MyLib --out-file lib.js

Node.js Applications:

# Development with watch
parcel watch server.js --target node --out-dir lib

# Production build
parcel build server.js --target node --out-dir dist --no-source-maps

Custom Configuration:

# Custom cache and output directories
parcel build index.html --cache-dir .parcel-cache --out-dir public

# Disable optimizations for debugging
parcel build index.html --no-minify --no-content-hash --log-level 4

# HTTPS development with custom certificates
parcel serve index.html --https --cert ./ssl/cert.pem --key ./ssl/key.pem

Log Levels

The --log-level option controls output verbosity:

--log-level 0    # Silent (no output)
--log-level 1    # Errors only
--log-level 2    # Warnings and errors
--log-level 3    # Info, warnings, and errors (default)
--log-level 4    # Verbose output
--log-level 5    # Debug output (creates log file)

Target Environments

The --target option specifies the runtime environment:

--target browser    # Browser environment (default)
--target node       # Node.js environment
--target electron   # Electron application

Each target applies different optimizations and polyfills appropriate for the environment.

Install with Tessl CLI

npx tessl i tessl/npm-parcel-bundler

docs

asset-system.md

bundler-api.md

cli.md

index.md

tile.json