Sunday, July 15, 2018

ParcelJS web application bundler Introduction

Learn parcel javascript bundler

ParcelJS bunder comparsion with webpack

Bundler task is to bundle your application assets like HTML, Javascript, and CSS, and dependencies and output into files We have a lot of web applications popular bundlers like webpack, Browserify, and rollup? then why parcelJs introduced?. With webpack, we have a lot of configurations and complex setup. Parcel has zero-based configuration and performance is good compared with existing bundlers.

Parcel Inbuilt features

  • Fast performance as it runs the tasks in parallel using multi-core processors and caching support
  • Integrated inbuilt in support for javascript, CSS, HTML and images, other UI assets. Extra Plugins are not required 
  • Zero or minimal configuration
  • Detailed error logging mechanism
  • Hot Module replacement.

Difference between ParcelJS and Webpack

Webpack Parcel
Complex to set up for a simple application Easy to Setup
Complex configuration Zero-based configuration
Default provides input and output file, Extra plugin setup required to have support html/css/scss/js/images/Es6/Typescript Inbuilt support for HTML/CSS/SCSS/js/Images/typescript
You need to configure development server Default supports development Server
Performance is good Best performance compared with Web pack because of caching and code splitting features
Strong community support and stable Emerging now an with active community

Setup/Install ParcelJS 

There are two ways we can install for any web application
Using Yarn too

yarn global add parcel-bundler
Using NPM tool

npm install -g parcel-bundler
To check parcelJs installation executes below command

B:\Workspace\parcel>parcel --version

Parcel Hello World Demo Application 

To create an empty project, FIrst, we need to have package.json in your project home directory. To create it, Use yarn or npm command to generate it

yarn init -y
npm init -y
This will generates package.json file as follows

  "name": "parcel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  "keywords": [],
  "author": "",
  "license": "ISC"
You need to supply the entry point for parcel command, For that create a index.html file as like below


      <script src="./index.js"></script>

console.log('Parcel Testing application')
The development server is required to run this code, Parcel has an inbuilt dev server

parcel index.html
Server running at http://localhost:1234
Built in 1.11S
parcel command Basic syntax

parcel {options} {Commands}

Learn Options and commands

Parcel Options Infomation
Options Description
--version or -V print Version information to console
--help or -h Syntax information

Parcel Commands Infomation
Command Description
serve Execute Development Server
Watch the changes for reloading content without restart server

Production build

Related article