Parcel JS Setups Walkthrough and Review

Parcel is a popular JavaScript bundling tool that can commonly be compared to Webpack, Rollup, and other JS bundlers. What it does different is it's dedication to being a zero configuration setup. This means most setups will not require the user to configure how the bundler should treat various packages, plugins and files. Such configuration can be very daunting for even experienced developers, and blocks you from getting to the actual coding.

I'm going to walk through setting up Parcel for various different common project setups, all in a single project. A large focus throughout the video will be observing how easy Parcel makes these setups and what it's auto-configuring for you. Throughout the video we'll cover:

- Setting up a minimal Parcel project from scratch
- Hot Module Replacement
- Vue
- React
- Svelte
- Typescript
- Modern JS features like conditional chaining, including fallbacks
- Browserslist to customize those fallbacks for cross-browser support
- Importing images in JavaScript
- Sass
- Stylus
- Styled Components
- Pug
- Multiple entry points

This project isn't intended to be used for a realistic app, since it includes several setups all in one, but I will be showing my commits along the way and pushing up the project to Github for anyone following along who wants to review the code.

Here is the repo:

~~~~~~

00:00:00​ - What we'll cover
00:04:15​ - Creating the minimal setup
00:08:00​ - Hot Module Replacement (HMR)
00:11:15​ - Dev & Prod NPM Scripts
00:18:20​ - Multiple Entrypoints
00:23:27​ - Modern JavaScript Transpiling
00:28:22​ - SASS
00:33:00​ - PostCSS, CSS Modules & Browserslist
00:46:26​ - Typescript
00:52:50​ - Vue, Pug & Stylus
01:03:06​ - React & Image imports
01:09:48​ - Styled Components
01:15:11​ - Typescript in React (.tsx)
01:19:13​ - Svelte
01:25:54​ - Wrap-up

~~~~~~

caniuse background-clip page:

Tailwind PostCSS 7 compatibility fix:

~~~~~~

Follow Jimmy Cleveland's doings:

[GavHern]

Thank you so much! Could not find anything good for setting up svelte with parcel until this video! Adding to my project now

[shannongfm]

Thank you, Jimmy. This has been by far the most thorough and helpful tutorial of any web dev tutorial I have ever used on Youtube.

[jjaxner]

Your videos are good. I discovered your channel about six month ago and learned a lot then. I just took some time and revisit some videos and going through them a little more thorougly. Still learning so much from you. Sorry to see that you not doing so many videos anymore. Hope your doing fine and that your videos will be discovered by more people so you might have a reason to do more of them. Wish you the best!

[HA-H-AH]

In Parcel version 2 the dist folder now rebuilds instantly. Just as fast as you delete it, it is rebuilt and replaced wit a fresh copy. Pretty cool. I did hear there were a lot of new features added into version 2 so maybe this was one of them. I don't know cause this is my first time using it, I never used version 1, but I thought that was pretty cool so I just thought I'd add that if anyone is interested to hear...Great video btw. Thank you for sharing your infinite wisdom. 🙏 Namaste

[threeone]

You're a great teacher. If you made a course on a subject I was interested in I would buy it.

[tasnimamaria]

Really cool..please make a detailed video on parcel v2. Because in v2 there are many new features.

[BleedingDryTheHeart]

Thanks alot man , God knows how much ive been battling the postcss autoprefixer error with parcel without finding how to fix that.

[PluieMelodique]

Quality content, hope you rise quick!

[mmdnho]

Hello Mr Jimmy, I've been doing some JavaScript for a while now. The shortcut commands that you did @ 4:36 really caught my attention, may I ask you how did you do that?

[sheldonfourie]

I love your videos Swash! Just discovered you and you are so detailed and to the point and clear

[FastEnglishu]

Thank you so much, I really appreciate your effort

[taggosaurus]

How do you have so less subscribers. Your content is solid.

[suyashpurwar]

You are awesome! This was very helpful

[gablabelle]

With swc in Parcel 2 … can we now get type checking and declarations generation?

[waqasahmed]

When i try to access local server which is built by the parcel i get page not found can you help me with it..

[blue_mustang_]

I don't get how to do the routing in Parcel, any hint ??I'm starting a brand new project on Parcel.js about an e-commerce.Which approach is better ? SPA or multi-entry points.

[benedictlang]

on start it shows everything correct, but if I build it, only the js file is linked to the html..what am i doing wrong?

[wandavazquez]

I cannot get images or hyperlinks from an API/JSON file to render

[wchorski]

When i go to build it puts my stylesheet as "src='/style.css'" and this unlinks the style

if I fix it with a period it works just fine. but is annoying to fix on each build "src='./style.css'"

[antonielmagalhaes]

Nice video ❤️, could you made an Walkthrough and Review video about esbuild ?