Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Babel config should follow browsers specification

See original GitHub issue

Using babel-preset-es2015 is now considered bad practice, and babel-preset-env is preferred.

This is because the env plugin allows for specifying a list of target browsers, which enables babel to automatically determine which plugins and polyfills to use, resulting in less code. https://github.com/babel/babel-preset-env

It will also enable code size to go down as we remove supported browsers in the future (looking at you, IE 11).

Tasks:

Replace babel-preset-es2015 by babel-preset-env in package.json
Set up an env configuration in package.json matching our supported browsers (validate string at http://browserl.ist/)
Ensure the output includes no polyfills, adjusting options if needed (see useBuiltIns and exclude options)
Ensure output remains sane and works across all supported browsers
(Optional) Measure generated JS size delta and brag about it on this issue 😃 Note that this may actually be small because of IE11 😦

Issue Analytics

State:
Created 7 years ago
Comments:6 (6 by maintainers)

Top GitHub Comments

1reaction

sgomescommented, Mar 9, 2017

@traviskaufman It might not even be necessary, as afaik you can run it through Babel with babel-preset-babili.

1reaction

BBosmancommented, Mar 9, 2017

I’ve done some experimentation and these are my findings.

Before:

-rw-r--r--  1 User  staff  248529 Mar  9 15:40 build/material-components-web.js
-rw-r--r--  1 User  staff   99880 Mar  9 15:40 build/material-components-web.min.js

After:

-rw-r--r--  1 User  staff  248529 Mar  9 15:40 build/material-components-web.js
-rw-r--r--  1 User  staff   99880 Mar  9 15:40 build/material-components-web.min.js

So that’s a whopping difference of 0 bytes.

As an experiment I removed IE 11 and got this:

-rw-r--r--  1 User  staff  247917 Mar  9 15:43 build/material-components-web.js

A difference of 612 bytes, but with a big caveat. It will fail on creating the .min.js file, as webpack uses uglifyjs internally to minify the code and it doesn’t yet support es2016 (or later) code.

So switching from babel-preset-es2015 to babel-preset-env isn’t viable until webpack/uglifyjs support es2016 (and newer) imho.

Top Results From Across the Web

Configure Babel

Create a file called babel.config.json with the following content at the root of your project (where the package.json is). { "presets": [...], "plugins":...

Options - Babel.js

This is useful for projects that use a browserslist config for files that won't be compiled with Babel. If a string is specified,...

babel/preset-env

By default @babel/preset-env will use browserslist config sources unless either the targets or ignoreBrowserslistConfig options are set.

Config Files - Babel.js

New in Babel 7.x, Babel has a concept of a "root" directory, which defaults to the current working directory. For project-wide configuration, Babel...

Presets - Babel.js

Babel presets can act as sharable set of Babel plugins and/or config ... Stage 3 - Candidate: complete spec and initial browser implementations....