Check out a free preview of the full Complete Intro to React, v7 course:
The "Browserslist" Lesson is part of the full, Complete Intro to React, v7 course featured in this preview video. Here's what you'd learn in this lesson:

Babel transforms your JS code from futuristic code to code that is understandable by older browsers. Via a package called browserslist (which Parcel installed for you) you can Babel what browsers to target.

Get Unlimited Access Now

Transcript from the "Browserslist" Lesson

[00:00:00]
>> So there's lots of alternatives to Parcel we talked about most of them so if that's your thing feel free to hop into those. One last configuration before we can pop into writing JSX is in your package.JSON. As a top level kind of, configuration item here, I want you to create a one called browsers, again, with an s, make sure you put the s there.

[00:00:27] I'm gonna say one more time, browsers, plural, list. Not browser list, browser's list. Okay? And we're just gonna tell Parcel what browsers we're targeting. So in our case, we're just writing dev code, this is for fun, we're not shipping it to anyone. So we're just gonna say something like last 2 Chrome versions.

[00:00:57] Obviously, don't write this for your production website, this would cover 15% of the general population. Generally, fairly small demographic to target. But this is not gonna transform very much for your code. It's gonna leave most as it is, because modern Chrome understands most things. I mean I put Chrome here but obviously I'm using Firefox, you can put Firefox here as well, you can put both of them, you can put, whatever you want here.

[00:01:26] But this is what I put when I'm just doing developer stuff is, don't transform most of it. Specifically the reason why I want you to do this is we don't wanna include regenerator. Which if you're going for really old browsers like IE8 or things like that, it'll includes things that will polyfill, async/await and generators and things like that, which is a huge library and it's problematic to deal with.

[00:01:53] So just include this. If you see something later in the course it says regenerator runtime not found, it's this that's messed up, delete your cache, delete your dist directory, maybe reinstall your node modules. And then run it again with browsers list here, and that should fix that problem.

[00:02:16] You can go to browserslist.dev, I'll just show you that really quick so you can see. That's here in browsers list, this will actually help you kind of select what version you want and it'll show you how many of the general populace that you are covering. And you can put in select here we put in last 2 Chrome versions and you can see here we're covering 16% of the population.

[00:02:49] There's some great, it's last two versions not dead, greater than 0.25% market share. There's a fancy string that you can get to include 99% of the population and still get fairly modern browsers. I'll let you all look that up in your spare time cuz I don't remember it off the top my head.

[00:03:10] But this has passed into both Parcel and PostCSS to make sure that they're compiling for the right targets. My last spiel on that is that you should not base that on something that's on Stack Overflow, you should go figure out who your users are on your website and then target them.

[00:03:27] And you should be targeting greater than 98%, greater than 99% hopefully. So we have reached in the site or in the course here if we go back, 02 or 02-js-tools. So, if you've fallen behind here or you want the complete set of of all the developer tools, just start from this kind of, jumping off point.