christophehurpeaubabel-preset-modern-browsers
Babel presets for modern browsers
This preset covers syntax of es2015, es2016, es2017, es2018, es2019 and es2020.
More info in the compatibility table below
babel 7
Since v12, this package requires @babel/core@7.0.0. If you use babel 6, you can still use the version "11.0.1" of this package. If you want to migrate, you can read the announcement and the official migration guide.
Alternatives
- @babel/preset-env, especially
targets.esmodules
If you don't need preset-env, using this package will only install a few dependencies.
Modern browsers
Installation
npm install --save-dev babel-preset-modern-browsers @babel/coreUsage
Add the following line to your .babelrc file:
{
"presets": ["modern-browsers"]
}Options
loose: Enable “loose” transformations for any plugins in this preset that allow them (Disabled by default).modules- Enable transformation of ES6 module syntax to another module type (Enabled by default to "commonjs"). Can be false to not transform modules, or "commonjs"shippedProposals- Enable features in stages but already available in browsers (Enabled by default)
{
presets: [['modern-browsers', { loose: true }]];
}{
presets: [[require('babel-preset-modern-browsers'), { loose: true }]];
}Browserlist
Edge >= 83, Firefox >= 78, FirefoxAndroid >= 78, Chrome >= 80, ChromeAndroid >= 80, Opera >= 67, OperaMobile >= 67, Safari >= 13.1, iOS >= 13.4Compatibility Table
| Feature | Edge | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
Shipped Proposals |
| | | | |||
| Numeric Separators |  |
 |
 |
 |
 |
| ↳ syntax-numeric-separator | | | | | |||
ES2020 |
| | | | |||
Optional chaining (?.) |
 |
 |
|
|
|
Nullish Coalescing operator (??) |
|
 |
|
|
|
ES2019 |
| | | | |||
| Optional catch binding | |
 |
 |
 |
 |
| JSON strings | |
 |
|
|
 |
ES2018 |
| | | | |||
| Object Rest/Spread Properties | |
 |
 |
 |
|
| RegExp Unicode Property Escapes | |
|
 |
 |
|
| Asynchronous Iterators | |
 |
 |
 |
|
ES2017 |
| | | | |||
| trailing commas in function |  |
 |
 |
 |
 |
| async function |  |
|
 |
 |
 |
ES2016 |
| | | | |||
| exponentiation operator | |
|
 |
 |
|
ES2015 |
|
 |
|
|
|
Syntax |
| | | | |||
| default parameters | |
|
 |
 |
|
| rest parameters |  |
 |
 |
 |
|
| spread |  |
 |
 |
 |
|
| computed properties | |
 |
 |
 |
 |
| shorthand properties | |
 |
 |
 |
 |
for...of |
|
|
 |
 |
|
| template string | |
|
 |
 |
|
| Regexp sticky | |
 |
|
|
|
| Regexp unicode | |
 |
|
|
|
| destructuring | |
|
|
|
|
| Unicode Strings | |
 |
|
|
|
| Octal/Binary Numbers | |
|
|
|
|
Bindings |
| | | | |||
const |
|
 |
|
|
|
let |
|
|
|
|
|
block-level function declaration |
 |
|
|
|
|
Functions |
| | | | |||
| arrow functions | |
|
|
|
|
| classes | |
|
|
|
|
| super | |
|
|
|
|
| generators | |
|
|
|
|
Built-ins |
| | | | |||
| typeof Symbol | |
|
 |
 |
|
Built-in extensions |
| | | | |||
| function name | |
|
|
|
|
Partially Shipped Proposals (Not included)
| Feature | Edge | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| Static & Instance Class Fields | |
 |
 |
 |
 |
| ↳ proposal-class-properties | | | | | |||
| Private Class Methods |  |
|
 |
 |
|
| ↳ proposal-private-methods | | | | |
Release Dates
- Firefox: https://wiki.mozilla.org/RapidRelease/Calendar
- Chrome: https://www.chromium.org/developers/calendar (Version History)
- Safari: https://developer.apple.com/safari/ (Version History)
- Edge: https://developer.microsoft.com/en-us/microsoft-edge/platform/changelog/ (Version History)
Thanks
- Inspired by https://github.com/askmatey/babel-preset-modern