Everything You Need to Know About Parcel: The Blazing Fast Web App Bundler 🚀
Evolution and innovation with zero configuration
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.
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:
Let’s connect our
Finally, add parcel script to our
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
All we need is to add a
build script to our
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
Setting up react is really simple, all we need to do is install our dependencies and setup our
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
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 create
$ mkdir vue && cd vue && touch index.js app.vue
Now let's hook our
Finally, let’s initialize vue and write our first vue component!
Voila! — we have Vue installed with
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