Hasty Treat - Bundlers in 2020
Syntax - Tasty Web Development Treats
English - November 09, 2020 14:00 - 24 minutes - 26.1 MB - ★★★★★ - 935 ratingsTechnology News Tech News css html html5 javascript webdevelopment Homepage Download Apple Podcasts Google Podcasts Overcast Castro Pocket Casts RSS feed
Previous Episode: Voice Coding is Really Good with Josh Comeau
Next Episode: 300th LIVE SHOW SPECTACULAR!
In this Hasty Treat, Scott and Wes talk about the state of bundlers in 2020 — Rome, Snowpack, Parcel, Webpack, Rollup, Vite, and more!
LogRocket - SponsorLogRocket 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 Notes02: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 complex03: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 shaking05:12 - Webpack
Hardest to learn, most used currently07:38 - Rollup
Scott’s pick as best option for most features vs ease of use Very powerful Mmmr, tree shaking, plugins, esm09: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 available12:01 - Npm, Yarn and Yarn 2
It’s a dependency installer rather than a bundler13: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 builds15:51 - Isobuild / Meteor
Scott’s underdog pick of the litter16:48 - Rome
Scott’s mystery pick of the week New tool to do it all Bundler, but also a linter17: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