In this Hasty Treat, Scott and Wes talk about the state of bundlers in 2020 — Rome, Snowpack, Parcel, Webpack, Rollup, Vite, and more!

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

02:39 - What is a bundler?

On the one hand, you can write HTML, CSS and JavaScript and open it in the browser
On the other hand, your build could be super complex

03:24 - What goes into configuring a bundler?

Templating language you use (Jsx, Pug, Vue, etc.)
JavaScript you write and compile to:
- ES6/7/8/9
- Typescript
- CoffeeScript
Polyfills
Environmental variables
CSS loading
Image compression
Asset Chunking
Tree shaking

05:12 - Webpack

Hardest to learn, most used currently

07:38 - Rollup

Scott’s pick as best option for most features vs ease of use
Very powerful
Mmmr, tree shaking, plugins, esm

09:52 - Parcel

Scott’s simplicity winner pick
Easiest to get started with
It’s a bundler, but also a dev tool
- Hot reload
- Local server
Config is done via your package.json
Lots of plugins available

12:01 - Npm, Yarn and Yarn 2

It’s a dependency installer rather than a bundler

13:27 - Snowpack

Scott’s speed pick of the week
Uses ESM by default
Like Sonic after a triple shot of espresso
HRM
Perfect for dev builds, as well as production builds

15:51 - Isobuild / Meteor

Scott’s underdog pick of the litter

16:48 - Rome

Scott’s mystery pick of the week
New tool to do it all
Bundler, but also a linter

17:54 - Deno

Linter
Typescript formatter
Bundler (bundle into a single .js file)

20:44 - Let your tool take care of it

Links

Tweet us your tasty treats!

Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets

Hasty Treat - Bundlers in 2020

Syntax - Tasty Web Development Treats