Bundle your files lightning fast with Parcel JS

I hate setting up my website projects.

I just want to jump into the actual coding, and not spend so much time configuring everything.

So I was really excited to try out Parcel.js, which is a build tool similar to WebPack or Gulp, but billed as a “zero configuration” bundler.

And I gotta say– Parcel delivered. After creating a quick project with index.html, script.js, and style.scss files, I was up and running in less than five minutes!

Here are some things Parcel can do that you’ll love:

  • It will automatically install other packages you need, like Sass and Babel.
  • Parcel will automatically compile your Sass files to CSS
  • You don’t need to create a config file for the default functionality (more on this later).
  • BONUS: Parcel spins up a local dev server, and it will automatically update anytime you make a change in your files!

So if you’re just working on a simple front-end web app and don’t require a lot of control over your build, you can swap in Parcel for WebPack or Gulp. I’ve been using Gulp, but I’m planning on using Parcel from now on.

Let’s look at how to get up and running with Parcel!

Install Parcel

You can install Parcel either using npm or yarn. You’ll also need to create a package.json file. (Note: if you don’t have Node.js installed, you will need to do that before these steps!)

npm:

npm install -g parcel-bundler
npm init -y

 

yarn:

yarn global add parcel-bundler
yarn init -y

Setup your website files

We’ll create a very simple website with just these files:

  • index.html
  • script.js
  • style.scss

Parcel uses your JavaScript file to reach your project, so in your index.html file, add a script tag pointing to it:

<script src="./script.js"></script>

Then in your script.js file, include your Sass file:

import '/style.scss';

Run Parcel!

And that’s all the configuration you need for a bare bones set up!

To run Parcel, on your command line, use this command:

parcel index.html

 

This will build your project, and start a local dev server at http://localhost:1234/. The cool part about this is that anytime you make changes to your files, Parcel will automatically rebuild and update the local site for you.

parcel-build-screenshot

In addition, if you use the build command, Parcel will minify your HTML, CSS and JS files for you. Again, without having to install any extra packages!

parcel build index.html

Does that sound insanely easy? It sort of is, especially if you’re used to wrangling with WebPack or Gulp 🙂

So how does Parcel work?

When you build with Parcel, it will create a /dist folder in your project, and put compiled copies of your files in that folder. This is where the dev server runs off of.

If you don’t need or want the dev server, you can make your own and use the /dist folder contents as your source files.

Out of the box, Parcel will install and use some packages for you to transform your files:

  • Babel is used to convert ES6 syntax to a JavaScript version that is available in all browsers
  • CSS Nano is used to minify your CSS when you use the build command

But what if I want more?

So the above configuration is great if you just need the basics.

But if you need Parcel to do a bit more, you will have to install some additional packages, and yes, you might need a config file or two.

I wanted to add autoprefixer to add vendor prefixes to CSS properties that need it. Unfortunately Parcel doesn’t do that by default, but it was fairly simple to add autoprefixer to my project.

First I installed PostCSS, which runs autoprefixer:

yarn add postcss-modules autoprefixer

Then I created a config file in my project root with the following code:

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

Note: this code is different from what Parcel has in their PostCSS setup instructions. However, when using their code snippet, when I built the project, the CSS class name that was using prefixed properties got renamed. This made all the CSS styles for that class name not work. So if you’re using autoprefixer I’d recommend using the code snippet I have above here.

If you’re curious about what other files Parcel can handle, definitely check out their website. Parcel can work with TypeScript, React, Vue, and many other types of projects.

You can also get the files I used in this tutorial in my GitHub account here.

Should I replace WebPack and Gulp with Parcel?

If you’re a beginner who just needs to compile SCSS files to CSS, Parcel would be an excellent choice for you. If you need more control or a lot of customization, WebPack or Gulp may still be the choice for you.

I’m planning on using Parcel as my default build tool from now on, especially for simple front-end projects.

What do you think about Parcel? Feel free to leave a comment below.

Comments

Write a Comment

at
Reply