Published: July 12, 2021, 1 p.m.
b'
In this Hasty Treat, Scott and Wes talk about modern build tools, comparisons between them, and makes them modern and next-level.
Prismic - Sponsor
Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at\\xa0prismic.io/syntax.
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
03:08 - Next Gen Bundlers are here!
- They are easy
- They are fast
- They are bundlers
- They are code splitters
- They are dev environments
- HMR / Fast Refresh
07:13 - What do they use under the hood?
- Parcel uses SWC (Rust)
- Vite uses esbuild (Go)
10:29 - How do you use them?
- Usually point your app at an HTML file
- Your HTML file has an ES module
- It then goes and loads everything from there
- They have adaptors for different types of files
- You can also point it directly at files
14:59 - Common use-cases
- React / JSX
- Vue
- Svelte
- TypeScript
- Custom Babel config
- Sass
- Vite: Detects it, asks to install it
- Parcel: Detects it, installs it for you
- PostCSS Processors
20:29 - Custom API
- Both have a custom API or \\u201cplugins\\u201d, which you can integrate into your app or tooling if needed.
- Example use-case: a really nice WordPress dev package.
20:57 - Which one?
- Both are really good!
- Parcel 2 has been in dev for 2+ years - unsure when it will launch.
- Wes: In my experience Vite \\u201cjust works\\u201d a bit better. Might be a side effect of Parcel being in dev.
- Both are wicked fast. (Wes: I literally screen recorded JS and CSS updates ~ 10 ms difference either way.)
- Life is good!
Links
Tweet us your tasty treats!
'