Build Tool: An Introduction To ParcelJS

Hey folks how y’all doing out there. Well in this second post of this year i’ll be writing about the new app bundler tool ParcelJS and it’s just going to be a brief introduction to it and i won’t be going deeper into it yet. Will come up with a separate post on it on some other day.

When we all write web applications, we frequently end up using modules and import 3rd party libraries, and we need a tool that helps us to build and bundle our application into a package that we then can deploy to a web server. And you know very well that already we’re having good number of bundler tools including Webpack, Browserify, Rollup, Gulp and Grunt. Among all this tool we can see that Webpack and Browserify is having a huge adoption for the last few years. All of this are super-popular tool which demands a lot of configuration setup and most of the developers really hate about it. As a developer i don’t want to see myself sitting and doing configuration setups instead of building applications which is my actual work. And here the most bundlers are able to perform many more tasks when building a web application like post processing of code or structuring your application for supporting lazy loading.

So let me take you to the actual point ParcelJS is brand new open source app/modules bundler and as far as i know this was launched in the early part of December 2017 (i don’t know the exact release date and it’s not important for this post). Here ParcelJS is believed to be a super-fast zero-configuration build tool compared to other bundling tools. It supposed to create really small bundles quite quickly as it uses multiple worker processes to ensure that the compilation process is executed in parallel on multiple cores. Furthermore Parcel uses a caching mechanism for the file system.

ParcelJS supports HTML, CSS, JavaScript, file assets just out-of-the-box (and no need to install any plugins). From other source that ParcelJS was claimed that it got speedup more than 5x compared to Webpack by using it’s built-in caching and here and it’ll be bit difficult to come into conclusion as this is still a new tool and we haven’t used it in full-fledged or in any actual projects. However, i would like to recommend you to use ParcelJS in small to medium sized projects as of now. See yourself and know how it works out for you.

What’s So Great About ParcelJS?

Bundle times are super fast It is believed to be a super faster than any other bundling tool around us.

Code splitting: This allows you to split your application code into separate bundles which can be loaded on demand, which means smaller initial bundle sizes and faster load times.

Hot Module Replacement (HMR): improves the development experience by automatically updating modules in the browser at runtime without needing a whole page refresh. This means that application state can be retained as you change small things.

Automatic transforms: it has support for many common transforms and transpilers built in out of the box. You can transform JavaScript using Babel, CSS using PostCSS, and HTML using PostHTML.

Assets bundling: it has special support for certain types of assets like JavaScript, CSS, and HTML files. Parcel automatically analyzes the dependencies referenced in these files and includes them in the output bundle.

Error logging: Parcel prints syntax highlighted code frames when it encounters errors to help you pinpoint the problem.

First Step To Get Started with Parcel

Trust me installing Parcel and getting started is quite easier by using NPM and to install Parcel globally on your machine you can type the following command on your terminal.

And to continue further up i recommend you to refer this blog post on “Getting Started with Parcel – A Zero Configuration Module Bundler” in details and i bet you that this post is will be your first step to play with this beautiful bundler.

Conclusion

Parcel is a new project and you can call it as a new kid on the block and till now it is showing a good momentum which is really encouraging. Of course, it needs to prove its worth in a competitive domain where Webpack seems to have a head start on its competitors. Since Webpack seems well-suited for large projects and whereas Webpack 4 Beta is out in the wild which is extremely doing fantastic and we can see a lot of good things about the Webpack in it’s major release, why not giving a try to Parcel for small and medium projects?

Here i have attached a video on so that you can know how to get started with ParcelJS in your project.