better-browserslist

Better browserslist

Why?

Depending on your babel setup, you won't have the same bundle same at the end. A big part of every builds are transpiled such as arrow functions. But nowadays, a lot of browsers supports those features.

Here is an example of different transpilations of a same input file with different targets in their babel configuration and the related coverage of this target among every browsers based on browserslist.

Results

source file length: 283 chars

modern

• browserslist query: firefox >= 55, and_ff >= 55, chrome >= 60, and_chr >= 60, ios >= 12, safari >= 12, samsung >= 5, and_uc >= 11.8, opera >= 47, op_mob >= 47, baidu >= 7
• browser coverage: 79.25%
• output file: 334 chars (x1.18)

regular

• browserslist query: edge >= 13, firefox >= 50, and_ff >= 50, chrome >= 49, and_chr >= 49, ios >= 9.4, safari >= 9.4, samsung >= 5, and_uc >= 11.8, opera >= 40, op_mob >= 40, baidu >= 7
• browser coverage: 86.91%
• output file: 1033 chars (x3.65)

regular_strict

• browserslist query: edge >= 13, firefox >= 50, and_ff >= 50, chrome >= 49, and_chr >= 49, ios >= 9.4, safari >= 9.4, samsung >= 5, and_uc >= 11.8, opera >= 40, op_mob >= 40, baidu >= 7, not firefox >= 55, not and_ff >= 55, not chrome >= 60, not and_chr >= 60, not ios >= 12, not safari >= 12, not samsung >= 5, not and_uc >= 11.8, not opera >= 47, not op_mob >= 47, not baidu >= 7
• browser coverage: 7.65%
• output file: 1033 chars (x3.65)

not_modern

• browserslist query: cover 100%, not firefox >= 55, not and_ff >= 55, not chrome >= 60, not and_chr >= 60, not ios >= 12, not safari >= 12, not samsung >= 5, not and_uc >= 11.8, not opera >= 47, not op_mob >= 47, not baidu >= 7
• browser coverage: 16.35%
• output file: 2372 chars (x8.38)

not_regular

• browserslist query: cover 100%, not edge >= 13, not firefox >= 50, not and_ff >= 50, not chrome >= 49, not and_chr >= 49, not ios >= 9.4, not safari >= 9.4, not samsung >= 5, not and_uc >= 11.8, not opera >= 40, not op_mob >= 40, not baidu >= 7
• browser coverage: 8.69%
• output file: 2372 chars (x8.38)

defaults

• browserslist query: defaults
• browser coverage: 87.34%
• output file: 2372 chars (x8.38)

How to use

const { modern, regular, regular_strict, not_modern, not_regular, old, oldest, defaults } = require('better-browserslist');

You can use one of those config in your own babel config.

old and oldest are respective aliases to regular_strict and not_regular

I recommend using modern, old or older.