babel-preset-modern-browsers

Babel presets for modern browsers

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

Alternatives

• https://github.com/babel/babel-preset-env

Installation

npm install --save-dev babel-preset-modern-browsers

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"
• fullSupport - Add support for features below
• es2016 - Enable es2016 features (Enabled by default)
• es2017 - Enable es2017 features (Enabled by default)

{
  presets: [
    ["modern-browsers", { "loose": true }]
  ]
}

{
  presets: [
    [require("babel-preset-modern-browsers").buildPreset, { "loose": true }]
  ]
}

Note: to support async functions and other proposals, you can add babel preset stage-X or the stage you want:

{
  "presets": [
    ["modern-browsers", { objectRest: true }],
    "stage-1"
  ]
}

This preset covers es2015, es2016 and es2017.

Features supported only with full-support

• default parameters: new Function() support
• for...of: iterator closing
• destructuring: iterator closing

More info in the compatibility table below

Compatibility Table

Feature	Edge	Firefox	Chrome	Opera	Safari
ES2015
Syntax
default parameters, without temporal dead zone, separate scope and new Function() support
default parameters, with temporal dead zone and separate scope
default parameters, with new Function() support
↳ (fullSupport) transform-es2015-parameters
rest parameters
↳ (fullSupport) transform-es2015-parameters
spread
↳ (unused) transform-es2015-spread
computed properties
↳ (unused) transform-es2015-computed-properties
shorthand properties
↳ (unused) transform-es2015-shorthand-properties
for...of, without iterator closing
for...of, with iterator closing
↳ (fullSupport) transform-es2015-for-of
template string
↳ (unused) transform-es2015-template-literals
Regexp sticky
↳ (unused) transform-es2015-sticky-regex
Regexp unicode
↳ (unused) transform-es2015-unicode-regex
destructuring, without iterator closing, separate scope, new Function() support
destructuring, with iterator closing, separate scope, new Function() support
↳ (fullSupport) transform-es2015-destructuring
Unicode Strings
Octal/Binary Numbers
↳ (unused) transform-es2015-literals
Bindings
const
let
↳ (unused) transform-es2015-block-scoping
block-level function declaration
↳ (unused) transform-es2015-block-scoped-functions
Functions
arrow functions
↳ (used, needed with function-name) transform-es2015-arrow-functions
classes
↳ (unused) transform-es2015-classes
super
↳ (unused) transform-es2015-object-super
generators without yield *, iterator closing
generators, yield *, iterator closing
↳ (unused) transform-regenerator
Built-ins
typeof Symbol
↳ (unused) transform-es2015-typeof-symbol
Built-in extensions
function name
function name (babel support)
↳ (used) transform-es2015-function-name
ES2016
exponentiation operator
↳ (used) transform-exponentiation-operator
ES2017
trailing commas in function
↳ (used) babel-plugin-syntax-trailing-function-commas
async function
↳ (used) babel-plugin-transform-async-to-generator

Release Dates

Firefox

Date	Version
2017-06-13
2017-04-18
2017-03-07
2017-01-24
2016-12-13	50.0.1
2016-11-08
2016-09-20
2016-08-02
2016-06-07

Chrome (Desktop release date)

Date	Version
2017-06-06?
2017-04-25?
2017-03-14?
2017-01-25
2016-12-06
2016-10-12
2016-08-31
2016-07-20

Thanks

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