ParcelJS web application bundler Introduction

Learn parcel javascript bundler

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  
1.9.7

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

  
index.html  
  
<html>  
  <body>  
      <script src="./index.js"></script>  
  </body>  
</html>  
  
index.js  
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

Build
Production build

ParcelJS web application bundler Introduction

Learn parcel javascript bundler

Parcel Inbuilt features

Difference between ParcelJS and Webpack

Setup/Install ParcelJS

Parcel Hello World Demo Application

Learn Options and commands

How to Convert Array into string, comma,hyphen in javascript/Angular

How to check String/Number exists in enum of javascript/typescript

How to convert Enum to String/Number in javascript/typescript

How to check boolean value of an array in javascript/typescript/angular

Javascript Example - Top Five ways to check Object is an array?

Typescript Tutorials - How to implement constants property in a class

Difference between ES6 Promise and RXJS Observable in javascript with examples