Published: Nov. 9, 2020, 2 p.m.
b'
In this Hasty Treat, Scott and Wes talk about the state of bundlers in 2020 \\u2014 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\\u2019s an exception tracker, a session re-player and a performance monitor. Get 14 days free at\\xa0logrocket.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 -\\xa0Webpack
- Hardest to learn, most used currently
07:38 -\\xa0Rollup
- Scott\\u2019s pick as best option for most features vs ease of use
- Very powerful
- Mmmr, tree shaking, plugins, esm
09:52 -\\xa0Parcel
- Scott\\u2019s simplicity winner pick
- Easiest to get started with
- It\\u2019s a bundler, but also a dev tool
- Config is done via your package.json
- Lots of plugins available
12:01 -\\xa0Npm,\\xa0Yarn and Yarn 2
- It\\u2019s a dependency installer rather than a bundler
13:27 -\\xa0Snowpack
- Scott\\u2019s 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 -\\xa0Isobuild / Meteor
- Scott\\u2019s underdog pick of the litter
16:48 -\\xa0Rome
- Scott\\u2019s mystery pick of the week
- New tool to do it all
- Bundler, but also a linter
17:54 -\\xa0Deno
- 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!
'