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
This DEV Live Stream was recorded on July 23, 2018
Join the next Live Stream. See all upcoming events here.
Top comments (8)
@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).
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.
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.
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.
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?
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?
Thanks for this, Anna.
Webpack has zero config mode too :)