ParcelJS web application bundler Introduction

The primary task of a bundler is to consolidate your application assets, such as HTML, JavaScript, CSS, and dependencies, and then output them into files. While there are several popular bundlers for web applications like webpack, Browserify, and rollup, ParcelJS was introduced to address certain shortcomings.

Webpack, for instance, often requires complex configurations and setups, which can be cumbersome for simpler applications. In contrast, ParcelJS boasts a zero-configuration approach and offers good performance compared to existing bundlers.

Parcel’s Built-in Features

Fast Performance: Parcel runs tasks in parallel using multi-core processors and provides caching support.
Integrated Support: It comes with built-in support for JavaScript, CSS, HTML, images, and other UI assets. Additional plugins are not required.
Zero or Minimal Configuration: Parcel requires minimal to no configuration, making it easy to get started.
Detailed Error Logging: Parcel offers a detailed error logging mechanism to aid in debugging.
Hot Module Replacement (HMR): Parcel supports hot module replacement, allowing for seamless changes to code during development.

Difference between ParcelJS and Webpack

Webpack	Parcel
Complex setup for simple applications	Easy setup
Complex configuration	Zero-based configuration
Default provides input and output file, Requires extra plugins for HTML/CSS/SCSS/JS/Images/ES6/TypeScript	Built-in support for HTML/CSS/SCSS/JS/Images/TypeScript
Requires configuration of development server	Built-in development server support
Good performance	Better performance due to caching and code-splitting features
Strong community support and stability	Emerging community support

Setting Up/Installing ParcelJS in Your Application

ParcelJS can be installed using either the Yarn or npm tool:

Using Yarn tool

yarn global add parcel-bundler

Using NPM tool

npm install -g parcel-bundler

To verify ParcelJS installation, execute the following command:

B:\Workspace\parcel>parcel --version
1.9.7

Parcel Hello World Demo Application

To create an empty project, you need to have a package.json in your project’s home directory. You can generate it using either yarn or npm commands.

yarn init -y
npm init -y

This will generate a package.json file.

{
  "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, Next, create an index.html file

index.html

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

And an index.js file:

console.log('Parcel Testing application')

To run the code, you’ll need the development server, which Parcel provides:

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

This command will start the server at http://localhost:1234🔗.

parcel commands Basic syntax:

parcel {options} {Commands}

Learning Options and Commands

Let’s explore some of the command-line options:

Parcel Options Infomation:

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

Parcel Commands Infomation:

serve: Execute the development server.
watch: Monitor changes for content reloading.
build: Generate a production build.

What is ParcelJS Used For?

ParcelJS is an open-source JavaScript bundler used for building, compiling, and testing applications in NodeJS. It also provides features like a web server, image optimization, and minification.

ParcelJS web application bundler Introduction

#Parcel’s Built-in Features

#Difference between ParcelJS and Webpack

#Setting Up/Installing ParcelJS in Your Application

#Parcel Hello World Demo Application

#Learning Options and Commands