Use Parcel Bundler

Use Parcel, you’ll Love It. If you’ve done ES6 for over a day I’m sure you’ve run into WebPack and configured it, not once, not twice but fifty times — or is that just me?

Although, I have the WebPack config nailed down pretty good after so many times I’ll admit, WebPack 4 took me through the ringer. (I do still use it, but Parcel is my buddy for a lot of small things!)

I’d Rate Parcel-Bundler 9/10. Right now we have Parcel 1.X, it has zero configuration. That is quite incredible considering we can toss in node-sass and HMR (Hot Module Reload) as an npm package and it works.

The downside is that Parcel might not do exactly what you want in special cases. Parcel 2.X is said to come with an optional configuration and I’ll bet it will be easier than Rollup or Webpack by ten times still.

Easy to use Almost Anywhere

Combining Parcel with the likes of Vue or React is a cake walk. Indeed, these two front-end bombshell libraries both include their own hidden variant of Webpack. Suppose you want to use it for your own concoction, or a lightweight ES6 app then go for it!

It’s useful to have Parcel installed globally:

npm i -g parcel-bundler

Use it with the: parcel command.

How to Setup Parcel for your Project

You don’t even need a bootstrap it’s so easy, I’ll pretend to create a new project called unicorns. I use the terminal for most things (Linux), you can get the same on Windows with Git Bash Git-SCM and I suggest you do because the terminal will become your life-long ally!

# Create a Project folder
mkdir -p ~/projects

# Set a temporary Env Variable to reduce repetition
TMP=unicorns/src/

# Create a Fake App (copy/paste)
mkdir -p $TMP/{scripts,styles} ; \
  mkdir $TMP/styles/layout ; \
  touch $TMP/scripts/app.js ; \
  touch $TMP/styles/app.scss ; \
  touch $TMP/styles/layout/_body.scss ; \
  touch $TMP/index.html

# Go to our project, Install parcel
cd ~/projects/unicorns && \
  yarn add -D parcel-bundler node-sass

Test with Demo Code

Great, we are loaded with some empty folders and Parcel with Node Sass. Now you could add some SASS and ES6+ Code, why don’t we quickly do that:

./src/styles/app.scss

@import layout/body;.box {
  padding: 10px;
  border: 1px solid red;
  margin: 0 auto;
}

./src/styles/layout/_body.scss

::root {
  background-color: #f4f4f4;
  color: #323232;
  font-size: 18px;
}

./src/scripts/app.js

document.addEventListener("DOMContentLoaded", () => {
  // Append something to #box
  const elem = document.getElementById(box);
  elem.append('ES6 Worked'));
});

./src/index.html

<!DOCTYPE html>
<html lang=en>
  <head meta charset=utf-8>
  <meta name=viewport content=width=device-width, initial-scale=1>
  <title>Parcel Bundler</title>
  <link rel=stylesheet href=./styles/app.scss>
</head>
<body>

<div class=box>
The HTML Loaded, do I have a red border? Did text get appended here
</div>

<script src=./scripts/app.js/body/html>

Run Parcel

If you have installed parcel-bundler globally, you can run the same command we will put in our package.json

package.json

"main": "src/index.html",
"scripts": {
  "start": "parcel serve $npm_package_main",
  "dev": "yarn start",
  "build": "parcel build $npm_package_main"
}

Note: $npm_package_main refers to the current package.json and reads the main variable, you can do this with any variable.

You should be able to type: yarn dev and load a browser with some very plain results.

Here are a few flags to know with the CLI commands, all of these are optional:

  • -p 1234 will change the port (Default: 1234)
  • --host localhost will change the hostname (Default: localhost)
  • --no-cache will remove a .cache folder to speed it up. (Default: off)
  • -d, --out-dir ./dist will output results into ./dist (Default: dist)
  • --cache-dir dirName will output cache to cache (Default: ./cache)
  • --hmr-port 1234 and --hmr-hostname localhost are optional as well.
  • For more type parcel help serve|watch|build

Templating with Parcel

There are a few template engines you can use with Parcel, I’ve found Handlebars to be the most resourceful when rendering to flat files when the goal was HTML templates.

yarn add parcel-plugin-handlebars

I’ve tried Twig, using the pre-made plugin and had some issues with including partials and using a lot of the features. Perhaps it will get better, it has very low downloads.

yarn add parcel-plugin-twig

I’ve not yet tried Pug, but there is a plugin for that as well.Hot Module ReloadingYou can actually just use the React HMR plugin with

yarn add -D react-hot-loader

or don’t install it at all and Parcel will detect it in your node_modules folder and even the lack of it and magically install what you need.

For HMR just include something like below in your ./src/scripts/app.js file, Perhaps at the footer of the page

if (module.hot) {
  module.hot.dispose(() = {
    console.log(Dumping Old Modules);
  })
}

Multi-Pages and/or Standalone

You are not forced to load HTML files. A reason to do so is that Parcel knows to also render anything included there, and down the chain of imports. If you wanted to handle two pages you do this:

parcel serve index.html about.html

If you wanted to serve all .html files, you can glob it:

parcel serve src/*.html
# or with subfolders too
parcel serve src/**/*.html

You can accomplish the same above with SCSS, JS, and the other commands.

parcel build src/scripts/app.js
parcel build src/styles/app.scss -d ./test-output
parcel build src/**/*.scss src/**/*.sass -d ./oh-so-combined

I hope this was somewhat interesting.

Published 20 Dec 2018

We are always students.
CodeZeus