DEV Community

Cover image for What is Parcel JS ? πŸ“¦
Mayank Kumar
Mayank Kumar

Posted on

What is Parcel JS ? πŸ“¦

First of all we will start by understanding What is a Module Bundler ?

A module bundler is a tool that takes pieces of JavaScript and their dependencies and bundles them into a single file, usually for use in the browser. You may have used tools such as Browserify, Webpack, Rollup or one of many others.

Today we will only be discussing about Parcel JS

gif

What is Parcel JS and why should we use it over Webpack or Rollup ??

Parcel is a web application bundler, differentiated by its developer experience. It offers blazing fast performance utilizing multicore processing, and requires zero configuration.

yarn global add parcel-bundler
Enter fullscreen mode Exit fullscreen mode

Many front-end developers have become frustrated with some of the complexities involved with building web apps today. It’s pretty standard practice to include some kind of build or bundling tool in a front-end workflow, thus many developers have looked into using a front-end tool like webpack/Rollup/Parcel.

But the learning curve for a tool like webpack is steep. Getting started with webpack isn’t easy due to its complex configurations.

gif

This is where Parcel JS Kicks in !!! πŸš€

Parcel.js is exactly what many newbie developers want, A simple, low-configuration bundler that you can get up and running with quickly without much hustle in learning the tool.

image

If you want to go in depth about Parcel JS and how to use it in your project check this documentation out form is official website

Parcel JS πŸ“¦πŸš€

Meme:

image

HAPPY CODING πŸš€πŸ₯‚

Discussion (3)

Collapse
marzelin profile image
Marc Ziel • Edited

Browserify??? Is anyone using browserify these days? I haven't heard of browserify in years.

You didn't answer why do we need a bundler. Why having a bundler become a standard practice?

Webpack offers zero config experience just as parcel does but it become a low-level tool used by framework clis like cra or vue-cli.

When you compare parcel nowadays, you should compare it with vite or snowpack.
Even though they're still called bundlers, bundling - that is combining various resources together for production, become only a part of what they are expected to do. You still want fast production builds, but bundling for production is much rare than providing instant feedback in development. We expect fast development cycle - immediate results produced by the development server after introducing a change in source code.

There are different requirements expected of a bundler:

  • bundling for production:
    • asset optimization
    • fast asset generation
  • transpilation:
    • does it work with different kinds of assets (scss, ts, pug, hs, etc)
    • ease of configuration
  • development:
    • fast and efficient recompilation
    • ability to maintain good performance when codebase grows
    • debugging experience
Collapse
hardyian profile image
ian hardy

All in all, I would say give Parcel a try because if you want you can later move to webpack. That's easy but wasting time to setup webpack configs and then shifting to Parcel might be costly. One live example is very own Hashnode browser extensions.

Collapse
aakanksha_thakur_920e6207 profile image
Aakanksha Thakur

Short and simple πŸ‘πŸ‘, Great work dude πŸ‘Ύ