How to get polyfills with Babel 7 and Webpack

Polyfills can be a little confusing to figure out why and when you need them, and how to accomplish that. Babel has docs covering it, but there is a lot to unpack there, which was quite confusing to me when I first encountered this world. I hope to distill a little bit of that magic in this video and give you a modern, Babel 7, solution to having cross-browser JavaScript method support in a Webpack 5 project.

00:00 - What we'll cover
01:41 - Quick project overview
03:10 - First bundle build errors in IE 11
04:17 - Adding a browserslist file
06:50 - Adding method that requires polyfill
08:01 - Adding core-js to get polyfills
10:40 - Getting async await working
15:20 - Babel 'useBuiltIns' with 'entry'
19:16 - Deprecated @babel/polyfill package docs
20:08 - Cheat code: 'usage' value for 'useBuiltIns'
24:12 - Wrap-up

Webpack Basics Walkthrough:

Repository for reference:

Follow Jimmy Cleveland's doings:

#javascript #webpack #babel #polyfill #crossbrowser

[davidfromnorth]

I'm just going through all "Webpack 5" series, the quality of content is outstanding, , ,

[ksorv]

Just wanted to let you know that what you've started is great.

Please keep making these videos. I can see you getting the attention soo. ❤️

[johnthirlaway]

Massive thank you, I had a CoreJS gotcha and couldn't work it out till I found your tutorial!

[alberuniazad]

Great explanation! This is what I was looking for all day!

[gager]

I was about to buy a webpack course on Udemy but then I came across your channel and never looked back. Your videos are really awesome. Don't ever stop making them!

[spondzi]

Hey! Just wanted to tell you that I love your intro. Such a great climate.

[dechobarca]

I don't comment often on videos, but honestly thank you so much for this and the previous 40 min video of the series.

Started learning Babel a day or two ago, only to find out that I also need Webpack. But their documentation is not user-friendly or beginner friendly at all, like they tell you "do this, but also there are 3 separate ways to do this, and by the way while doing A, keeping in mind that it might require B for it to work properly, also here are a bunch of other tools we use that you also need to learn about". So it got overwhelming pretty fast.

I think you've done an excellent job here explaining how to set this up properly while also covering many of the potential caveats and stuff, but MOST importantly what is actually going on behind the scenes which is really important, otherwise we're just hacking/cheating our way through.

So cheers once again, you have no idea how much time and frustration this saved me.

[smaragd_]

Very nice video and well covered topic with key issues occurring out of it. Thank you!

[zoachim]

25:10 agree on the less anxiety :D funny. great vid, looking forward to the React stuff.

[nishant.c]

Stumbled upon this channel while searching for webpack bundle optimisation tips, and I am highly impressed with the quality of content in this channel. It's certainly more than just "Yet another tutorial channel", You are doing a great job here, really appreciate your effort and time, looking forward to more from your channel.

[miladkarimi]

the quality of content is really excellent!👍

[dynerushd]

These webpack series really helped me out, Thanks!

[normamendonca]

Awesome! Really appreciate the areas you've focused on.

[adconde]

Just wanted to say thank you for sharing this knowledge. It is very good content, keep it up.

[santhoshraghavpidathala]

Indepth tutorial, very very nice 👌. Please continue series on webpack with postcss, purifycss, corejs etc

[thangha]

Hey dude, that is the exact thing I have to deal with. Thank you so much, really clear!

[gimba]

your videos are exceptional, they are easy to understand even for beginners. keep up the good work❤❤

[WarriorPega]

This is incredibly thorough! Really appreciate all the insight you provided. I'm very new to bundlers, webpack, babel - the whole lot of them. This cleared up a lot of what was confusing to me about setting up specific targets and taking advantage of newer features!

[evalarumbe]

Thanks for the clear demo and explanations! This vid helps the docs make more sense, adding some useful background and detail

[shreshthmohan]

Thanks for making this video. Finding these things in the documentation isn't that easy.