"No Config" Bundling with Parcel

Publish Date: Aug 10 '18

44 8

This workshop will focus on using Parcel - a web application bundler - to bundle up and serve a Typescript & React project without writing a configuration file! Parcel is a quick and lightweight alternative to bundlers like Webpack and Rollup. We'll discuss bundling in general, dive into some source code, and go over the steps required to set up and add dependencies to our application.

All levels are welcome! Prior experience with a bundler is helpful for context, but not required.

Timeline

0:00: Introduction
4:30: TLDR; Bundlers
5:55: Ways of creating production code
7:40: Enter the Webpack!
10:12: What you get with Parcel
11:55: Let's try it! Starting from Scratch
20:00: "Automagically" Installed Dependencies
29:30: What about production?
30:35: Writing a configuration file
33:25: The Takeaway

Click here for slides!

This DEV Live Stream was recorded on July 23, 2018
Join the next Live Stream. See all upcoming events here.

Comments 8 total

zeddotesAug 10, 2018

Thanks for this, Anna.
Cristhian H.Aug 11, 2018

@Anna, amazing post.

Part of our frontend team has used parcelbundler the last 6 months and it is fantastic.
But also has some cons that I will list below:

The generated file has a very high weight compared to a webpack configuration.

The CPU consumption at the time of generating the bundler often exceeds our allocated CPU for our continuous integration processes, which generates failures. This can be solved by using another packer for the continuous integration process, but the ideal would be to continue using parcelbundler.

Until recently I did not have support for source maps, currently it already has, which allows us to use sentry to monitor errors (Sentry requires sourcemaps to be able to track them).
- Anna RankinAug 11, 2018
  
  Thank you for this! This is exactly the kind of detailed context I don't have when folks ask me about using it in production. Fantastic! I'm going to share this with my team.
Jaime RiosAug 12, 2018

Hi Anna, I've migrated my app from CRE to Parcel, but I'm having troubles setting up the test suite. The problem that I have has something to do with the ES Modules import. Here is the repo github.com/papaponmx/prime/pull/12

Could you take a look?
- Anna RankinAug 14, 2018
  
  Hi Jaime! 👋 I took a look, but I'm not sure where to find the problem without cloning down the repo. I haven't run into similar issues - any further ideas on what it could be?
Steven HargroveAug 12, 2018

This "no config" claim from parcel is merely the result of the very few features it actually offers - not by some miracle or genius design.

While i think its a healthy thing to consider multiple ways to approach bundling - i really think this message is nothing short of misleading.

Parcel is easily 5 years behind webpack. You can see a dramatic difference in the basic features alone when comparing the two - it becomes clear fairly quick that webpack absolutely dwarfs parcel.

For purely static webpages, or very tiny apps - sure maybe parcel could work. But, odds are that you will very quickly hit a wall that parcel isn't even close to solving for you.
- Anna RankinAug 14, 2018
  
  Well, it seems we're in agreement on one thing at least - as I mentioned in my stream, Webpack works great, and Parcel isn't right for every project! Cristhian H. also made some good points about what Parcel does well/not well in another comment. I don't think anyone will be calling Parcel a "miracle," but when you only need/want a few features, I've found it works well and has a nice developer experience.
Paweł KowalskiSep 25, 2019

Webpack has zero config mode too :)

Add comment

Anna Rankin @annarankin