babel-preset-modern-browsers

Babel presets for modern browsers

DEPRECATED

Use @babel/preset-env instead with configured browserslists:

package.json

{
  "browserslist": {
    "modern": [
      "defaults and supports es6-module"
    ]
  },
}

babel.config.json

{
-  "presets": ["modern-browsers"]
+  "presets": [["@babel/preset-env", {
+      "shippedProposals": true,
+      "bugfixes": true,
+      "browserslistEnv": "modern"
+    }]]
}

https://babeljs.io/docs/babel-preset-env

Legacy README

• Installation
• Usage
• Presets
• Compatibility Table
• Release Dates

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/core

Usage

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.4

Compatibility 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/ (Version History)

Thanks

• Inspired by https://github.com/askmatey/babel-preset-modern