ParcelJS web application bundler Introduction

The 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 was parcelJS introduced?. With webpack, we have a lot of configurations and complex setups. The parcel has a 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 support for javascript, CSS, HTML, images, and 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 the 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 stability	Emerging now with active community

Setup/Install ParcelJS in application

There are two ways we can install any web application

Using Yarn tool

yarn global add parcel-bundler

Using NPM tool

npm install -g parcel-bundler

To check parcelJs installation execute the 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 the yarn or npm command to generate.

yarn init -y
npm init -y

It generates a 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 the parcel command, For that create an index.html file 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 commands Basic syntax:

parcel {options} {Commands}

Learn Options and commands

let’s see following command line options

Parcel Options Infomation:

--version or -V : print Version information to console
--help or -h : Syntax information

Parcel Commands Infomation:

serve: Execute Development Server
Watch: the changes for reloading content without restarting the server
Build: Production build

What is parcel JS used for?

ParcelJS is an javascript opensource bunder, It is used to build, compile and test application in NodeJS.

It also provides various features web server, image optimization,minification.