Yet other bundler/build tool? Really? Yep — you betcha, evolution and innovation combined brings you Parcel!

What’s So Special About Parcel and Why Should I Care?

While webpack brings a lot of configurability with the cost of complexity — Parcel brings simplicity. Parcel brands itself as “zero configuration”.

Unraveling the above — Parcel has a development server built-in, out of the box. The development server will automatically rebuild your app as you change files and supports hot module replacement for fast development.

What Are the Benefits of Parcel?

• Fast bundle times — Parcel is faster than Webpack, Rollup and Browserify.

Something to consider: Webpack is still awesome and sometimes can be faster.

• Parcel has out of the box support for JS, CSS, HTML, file assets, and more — no plugins needed — More user-friendly.
• Zero configuration required. Out of the box code splitting, hot module reloading, CSS preprocessors, development server, caching, and many more!
• Friendlier error logs.

Parcel error handling

All Right — So When Should I Use Parcel, Webpack or Rollup?

It’s completely up to you but I personally would use each bundler in the following situations:

Parcel — Small to medium sized projects (<15k lines of code)

Webpack — Large to enterprise-sized projects.

Rollup — For NPM packages.

Let’s give Parcel a shot!

Installation is Fairly Straight-Forward

We installed the parcel-bundler npm package locally. Now we need to initialize a node project:

Next, create index.html and index.js file.

Let’s connect our index.html and index.js

Finally, add parcel script to our package.json:

That’s all there is to configuration — amazing time saver!

Next up — let’s start our server.

Work like a charm! Notice the build times.

15ms?! Wow — that’s blazing fast indeed!

How’s the HMR?

Also feels very fast.

All we need is the node-sass package and we’re good to go!

Next up, add some styling and import the styles.scss to index.js:

Production Build

All we need is to add a build script to our package.json:

Running our build script:

See how easy Parcel makes our lives?

You can specify a specific build path like so:

parcel build index.js -d build/output

React

Setting up react is really simple, all we need to do is install our dependencies and setup our .babelrc:

npm install --save react react-dom babel-preset-env babel-preset-react && touch .babelrc

All right, let’s bring out the big guns! Try writing our initial react component yourself before scrolling…

As requested, here’s the Vue example.

Start by installing vue and parcel-plugin-vue — the latter for .vue components support.

$ npm i --save vue parcel-plugin-vue

We need to add our root element, import the vue index file and initialize Vue.

Start by making a vue directory and let’s also createindex.js and app.vue

$ mkdir vue && cd vue && touch index.js app.vue

Now let's hook our index.js and index.html:

Finally, let’s initialize vue and write our first vue component!

Voila! — we have Vue installed with .vue support!

TypeScript

This one is extremely easy — just install TypeScript and we’re good to go!

npm i --save typescript

Make a file called index.ts and insert it into the index.html:

Good to go!

If you want to take your JavaScript abilities to the next level, I’d recommend reading the “You Don’t Know JS” book series.

Heres the Source Code!

Thanks for reading! ❤