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 applicationUsing Yarn too
yarn global add parcel-bundler
npm install -g parcel-bundler
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
{
"name": "parcel",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
index.html
<html>
<body>
<script src="./index.js"></script>
</body>
</html>
index.js
console.log('Parcel Testing application')
parcel index.html
Server running at http://localhost:1234
Built in 1.11S
parcel {options} {Commands}
Learn Options and commands
| Options | Description |
|---|---|
| --version or -V | print Version information to console |
| --help or -h | Syntax information |
| Command | Description |
|---|---|
| serve | Execute Development Server |
| Watch | the changes for reloading content without restart server |
Build
Production build
EmoticonEmoticon