#2 - First Steps with Parcel

A few weeks ago, I decided to start a very simple frontend exercise with just one HTML file (and SASS, and JS). Nevertheless, I also wanted some goodies like dev server, hot-reloading, and autoprefixer.

My first impulse was to use Webpack - I was used to the name. It was my first time with manual configuration of it so I started reading the documentation. It didn't take long to feel that I was reading too much and spending too much time to achieve something "simple". That lead me to look for alternatives.

One name came to my mind: Parcel. I glanced over its website once and I came back to see if I could use it now. I'm happy to say that it was perfect for my needs.

The Parcel team calls it the "zero-configuration build tool". And that was almost the case for me.

After installing it with npm install --save-dev parcel, I had to set the entry point inside the package.json file (and scripts for convenience):

  ...
  "source": "src/index.html",
  "scripts": {
    "start": "parcel",
    "build": "parcel build"
  }
  ...

After that, when running npm start I had a dev server with hot-reloading. By default, Parcel builds to a directory called dist.

To get autoprefixer running, I created a .postcssrc file inside of the project directory with the following content:

{
    "plugins": {
        "autoprefixer": {}
    }
}

And to finalize, added the following to package.json (autoprefixer uses browserslist):

"browserslist": "> 0.5%, last 2 versions, not dead",

And that's it. Amazing, right?

With such a simple configuration, you can do nice things like importing a SASS file instead of a CSS one, or TypeScript instead of Javascript on your HTML. Parcel will take care of everything. 🤩

<link rel="stylesheet" href="styles.scss" />
<script src="formValidation.ts" defer></script>

English is not my main language, but I'm trying to improve on it. If you find any errors, please let me know: @arthurvmdantas.