Example Repo in https://github.com/maxgoffman/ParcelReact. This example project uses Docker, if you don’t know what is Docker check out Docker: containerized development for the win.

When you’re working in JavaScript there is a set of tools you’ll use almost always. In my case, among other tools, I use Visual Studio Code for coding (some people prefer Sublime, Notepad++, or Vim depending on their OS, but I like VS Code), NPM (sometimes yarn if it’s required) for package management, Babel for transpiling, and for bundling I use Webpack most of the time. However, sometimes I need to create a project fast. It could be for testing, prototyping or even for delivering a quick solution in the short term, and I just don’t have time to go through all the configuration and customization steps. In those cases, I choose a different bundler: Parcel.
Parcel, is a Zero configuration bundler, works really fast, supports code splitting and hot module replacement. It’s very easy to use: you just choose the main starting file of the application and Parcel bundles everything! Let’s take a look at an example project using React.js.

Example project

First install parcel globally:

npm install -g parcel-bundler

Then, configure your package.json:

{
  "name": "Parcel React",
  "version": "1.0.0",
  "description": "Quick test using parcel",
  "scripts": {
    "build:dev": "parcel serve ./src/index.html --port 60000 --hmr-port 60080 --log-level 4 --target browser"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  }
}

The command parcel serve/watch allows testing with hot module replacement. We tell parcel what is the starting point of the app and it takes care of the rest. With log level 4 I instruct parcel to have a verbose log level to show more information. We can also configure the port we use to serve the page, or the hot module replacement port.
Finally, run:

npm run build:dev

And get to work.

Cons

You may wonder: If Parcel is so easy and fast why isn’t everyone using it? Sure, Parcel is pretty good and sometimes it’s even faster than Webpack. But, it has a few quirks:
– Sometimes you can find weird errors using hot module replacement feature. This can become pretty annoying but it can be fixed most of the time. It just takes time, either you have to configure Babel or your IDE. This takes away the whole zero config advantage.
– Doesn’t work that well with other automagical tools like Jest. It can be worked out by configuring Babel.

The verdict

I have replaced Webpack with Parcel in my latest projects and I’m pretty satisfied. I’m not saying I won’t use Webpack again, but Parcel is a pretty good alternative.