THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.
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 setup. The 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 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 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 stable
Emerging now a 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 the yarn or npm command to generate it.
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
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 restarting the server
Build
Production build
