Hasty Treat - Bundlers in 2020

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 • Gatsby • (webpack) • Next.js • (webpack) • Gridsome • Create React App • Vite • (Rollup) • Broccoli.js Links • Babel • Gulp • Syntax 212: Pika Pkg • Fred Schott • Pika • Rust • Go • Software Engineering Daily: Deno and TypeScript with Elio Rivero 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