Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

babel-preset-airbnb

airbnb135.5kMIT5.0.0

A babel preset for transforming your JavaScript for Airbnb

babel, es6, es2015, javascript

readme

babel-preset-airbnb

A babel preset for transforming your JavaScript for Airbnb.

Currently contains transforms for all stage 4 (ES2018) and stage 3 syntax that is permitted in the Airbnb Style Guide. Please note that if usage of a stage 3 proposal is not explicitly mentioned in the Airbnb Style Guide, then it will not be enabled here. Additionally, stage 4 syntax that is excluded is as follows:

  • generators: regenerator-runtime is too heavyweight for our use.
  • async/await: regenerator-runtime is too heavyweight for our use, and async-to-promises is not yet complete enough to be safely used.
  • async iterators: depends on both generators and async functions
  • lifted template literal restrictions: we do not use tagged template literals, nor implement custom DSLs, otherwise we would enable this.

Install

$ npm install --save-dev babel-preset-airbnb

Usage

.babelrc

{
  "presets": ["airbnb"]
}

Via CLI

$ babel script.js --presets airbnb

Via Node API

require('@babel/core').transform('code', {
  presets: ['airbnb']
});

Targeting Environments

This module uses @babel/preset-env to target specific environments.

Please refer to @babel/preset-env#targets for a list of available options.

For a list of browsers please see browserlist.

You may override our default list of targets by providing your own targets key.

{
  "presets": [["airbnb", {
    "targets": {
      "chrome": 50,
      "ie": 11,
      "firefox": 45
    }
  }]]
}

The following transpiles only for Node v6.

{
  "presets": [["airbnb", {
    "targets": {
      "node": 6
    }
  }]]
}

If you wish, you can also inherit our default list of browsers and extend them using additionalTargets.

{
  "presets": [["airbnb", {
    "additionalTargets": {
      "chrome": 42,
      "ie": 8
    }
  }]]
}

You may override our default debug option by providing your own debug key.

{
  "presets": [["airbnb", {
    "debug": true
  }]]
}

React Development Mode

When process.env.NODE_ENV is 'development', the development mode will be set for @babel/preset-react.

You may override our default development option by providing your own boolean development key.

{
  "presets": [["airbnb", {
    "development": false
  }]]
}

React PropTypes removal

This preset can be configured to remove propTypes using babel-plugin-transform-react-remove-prop-types with the following default options:

To enable this transformation with the default options, set the removePropTypes option to true:

{
  "presets": [["airbnb", {
    "removePropTypes": true
  }]]
}

The default options that will be used are:

{
  mode: 'wrap',
  additionalLibraries: ['airbnb-prop-types'],
  ignoreFilenames: ['node_modules'],
}

Default options can be overridden using the removePropTypes option. These options will be shallow-merged with the defaults:

{
  "presets": [["airbnb", {
    "removePropTypes": {
      "mode": "remove"
    }
  }]]
}

For example, if you are using this plugin in a deployable app, you might want to use the remove mode for your production build (and disable this transform entirely in development for optimal build speeds).

Classes loose mode

By default, this preset will compile classes in normal mode. This is safer, but comes with a bundle size and runtime overhead. To compile classes in loose mode, set the looseClasses option to true:

{
  "presets": [["airbnb", {
    "looseClasses": true,
  }]]
}

The risks of enabling loose classes are outlined in the Babel docs.

Specifying a babel runtime version

By default @babel/plugin-transform-runtime will assume the oldest version of the runtime to avoid importing helpers that don't exist which would fail at runtime. This can result in newer helpers being inlined into modules (ex. objectSpread2) which increases bundle size.

To avoid this you can configure the preset to use the same version of the runtime that's installed in your package.json.

ex. If package.json has "@babel/runtime": "^7.5.5" then you can use:

{
  "presets": [["airbnb", {
    "runtimeVersion": "7.5.5",
  }]]
}

Note that this will result in a runtime breakage if the version passed into the airbnb preset is newer than the version of the babel runtime actually being used at build time.

Disabling plugin-transform-runtime

You can use the transformRuntime option to disable @babel/plugin-transform-runtime. Specifying false will disable the plugin. This option defaults to true.

Specifying module transforms

You can use the modules option to enable transformation of modules given to this preset:

{
  "presets": [["airbnb", {
    "modules": "auto"
  }]]
}

Both true and the option default auto will not transform modules if ES6 module syntax is already supported by the environment, or "commonjs" otherwise. false will not transform modules.

You can use the runtimeHelpersUseESModules option to prevent transformation of runtime helpers to CommonJS modules.

{
  "presets": [["airbnb", {
    "runtimeHelpersUseESModules": true
  }]]
}

true will not transform runtime helpers to CommonJS modules. false will transform runtime helpers to CommonJS modules. The option defaults to true if modules is set to false, and false otherwise.

changelog

Change Log

All notable changes to this project will be documented in this file. This project adheres to Semantic Versioning.

[5.0.0] - 2020.04.02

  • [Breaking] Update browser targets: Chrome 35 -> 40, Edge 14 -> 18, IE 9 -> 11, Firefox 52 -> 72, Safari 8 -> 12, Android 30 -> 35.
  • [Breaking] Removed JScript support (IE 6-8).

[4.5.0] - 2020.04.02

  • [New] Add @babel/plugin-proposal-numeric-separator and @babel/plugin-proposal-optional-catch-binding (#62)
  • [Deps] Update all to latest versions.

[4.4.0] - 2019.11.20

  • [New] Add transformRuntime option (#60)

[4.3.0] - 2019.11.15

  • [New] Add runtimeHelpersUseESModules option (#59)

[4.2.0] - 2019.11.14

  • [New] Add @babel/plugin-proposal-nullish-coalescing-operator and @babel/plugin-proposal-optional-chaining (#58)

[4.1.0] - 2019.10.3

  • [New] Allow specifying the Babel runtime version

[4.0.1] - 2019.06.26

  • update license to MIT

[4.0.0] - 2019.06.18

  • restore breaking changes from v3.3.0 and v3.3.1

[3.3.2] - 2019.06.18

  • Revert breaking changes from v3.3.0 and v3.3.1

[3.3.1] - 2019.06.18

  • [Fix] Use esm runtime helpers only when modules === false (#52)

[3.3.0] - 2019.06.18

  • [New] Use @babel/plugin-transform-runtime for helpers (#51)

[3.2.1] - 2019-03-19

  • [Fix] Correct default targets (explorer -> ie, and remove ucandroid) (#50)

[3.2.0] - 2018-12-14

  • [New] add looseClasses option to compile classes in loose mode (#46)
  • [New] infer default value of jscript option from explorer target version (#47)

[3.1.0] - 2018-12-13

  • [New] add jscript option to disable JScript transformation (#45)

[3.0.1] - 2018-10-08

  • [Fix] the env preset only accepts false or a string, not explicit options

[3.0.0] - 2018-10-08

  • [Breaking] update to babel 7 (#37)
  • [New] add support to supply the react preset's "development" option

[2.6.0] - 2018-08-29

  • [New] Add removePropTypes option (#36)

[2.5.3] - 2018-07-26

  • [Fix] [Deps] add missing babel-plugin-transform-strict-mode (#35)

[2.5.2] - 2018-07-15

  • [Fix] add strict mode for real
  • [Docs] Update for ES2018

[2.5.1] - 2018-06-15

  • [Fix] partial revert of #31; set strictMode to true

[2.5.0] - 2018-06-15

  • [New] transform ES5 property mutators
  • [New/Fix] set "strict" to true (#31)
  • [Deps] update babel-preset-env, babel-plugin-transform-object-rest-spread, babel-plugin-transform-es2015-modules-commonjs, object.assign

[2.4.0] - 2017-06-28

  • [New] Added an option to toggle debug mode (#18)

[2.3.3] - 2017-06-20

  • Switches from babel-preset-es2015 to babel-preset-env. Allows targeting of specific environments.