Parcel JS – A Blazing fast, zero configuration web application bundler

Introduction

JavaScript world has many great tools to assist us in building our applications with ease. One of the common tool in any JavaScript developer’s toolkit is a bundler. You may be already using one for your existing development activities.

In this post, we will learn about Parcel. The official website mention it as a blazing fast, zero configuration web application bundler and we will see that if Parcel really live up to this statement.

What is a Bundler

A bundler takes our code and bundle it into a package. If you have used Angular, React or Vue JS frameworks, then you have already used WebPack as a bundler.

A bundler takes our application code and generate some optimized, smaller code with improved performance. The code is compressed and the file size is reduced. Its not only does this with JavaScript code, but also HTML and CSS as well.

What Parcel Does

Parcel does exactly what a bundler is supposed to do. It packs your web application into a package. The individual files are combined into one.

Parcel offers an opinionated yet simple approach to module bundling that does not require extra configuration.

Parcel uses worker processes to enable multicore compilation, and has a filesystem cache for fast rebuilds even after a restart.

Parcel gets along with ES6 without any problems. It converts ES6 modules to ES5 to work with browsers which yet not have ES6 support implemented. It also works with TypeScript as well.

Code splitting feature of Parcel splits your output bundles so you only load what is needed on initial load. Hot module Replacement is done automatically and it also does provide very friendly error logging to help you pin point the problem.

Parcel also has a development server built-in, which is very handy in development purposes.

More information can be found on the official website on this link.

Setting the Scene

We will see parcel in action using a simple JavaScript code base. You should have Node and npm already installed on your machine (npm will be installed as part of node installation). You can download the Node installer from official node website.

I have created a folder for application and here is how it currently looks:

Next, I used npm init command to create a package.json file as shown below:

npm init -y

Next install parcel as development dependency using npm:

npm install parcel-bundler --save-dev

Let’s create a src folder and create some files there:

and here is how these files are setup:

We are using some of the ES6 features in our JS Code.

Next, we will update package.json file for npm configurations by adding dev and build scripts as shown below:

Testing the Application

With the above shown npm configs setup, we can start simply typing following command on terminal:

npm run dev

It will start the parcel’s built-in development server and we can now visit the application by browsing to the URL:

Now, if we make some changes to the code and save the changes, those changes will be automatically picked up by parcel and our browser window will get refreshed.

Building the Application

Once development is finished, we can run the following command to create a production build, which we can then deploy to our web server:

npm run build

this command will create a dist folder which we can deploy to our web server:

Summary

Parcel is very easy to setup and work with. It requires almost zero configurations. Its light-weight, very fast and learning curve is very minimal.

You can download source code used for the demo from this git repository. Let me know if you have some questions or comments.

My Recent Books