Learn

In addition to providing a fast way to configure Babel, babel-preset-env allows us to provide a list of browsers we want to be supported using a file named .browserslistrc.

Within this file there are many ways in which we can specify our target list of browsers. The a good default configuration, which covers most of the browsers a developer could expect users to be on can be specified with:

defaults

However, we can also customize this list. For example, we could make sure that our project is supported by the last two versions of Internet Explorer with:

last 2 Explorer versions

Or maybe you want to make sure your application supports 99.5% of the users of the internet:

cover 99.5%

The browserslist documentation provides additional syntax and examples for conifguring .browserslist.

After defining .browserslist, you can list all browsers supported by your .browserlist file using the following command:

npx browserslist

Let’s practice defining a list of browsers we want our projects to support!

Instructions

1.

First, create a .browserslistrc file.

Then, configure it to target 99.9% of internet users. (This is much more than practically necessary.)

2.

Check the list of browsers now supported by your application, it should be pretty long.

3.

Run our build command to make Babel transpile our code to be compatible with the list of browsers!

4.

Open up the output in out/Dog.js. This code should be compatible with all the browsers listed in the previous step. Click “Run” when you’ve had a look.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?