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.
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
There are two ways we can install for any web applicationUsing 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
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}
Parcel Options Infomation
Options
Description
--version or -V
print Version information to console
--help or -h
Syntax information
Parcel Commands Infomation
Command
serve
Execute Development Server
Watch
the changes for reloading content without restart server
BuildProduction build