Plugins

Now, out of the box Babel doesn't do anything. It basically acts like by parsing the code and then generating the same code back out again. You will need to add plugins for Babel to do anything.

Instead of individual plugins, you can also enable a set of plugins in a preset.

These plugins apply transformations to your code.

• property-literals

ES5

ES2015

• block-scoped-functions
• classes
• destructuring
• for-of
• instanceof
• new-target
• parameters
• spread
• template-literals
• unicode-regex

ES2016

• exponentiation-operator

ES2018

• dotall-regex
• object-rest-spread
• unicode-property-regex

Modules

• modules-amd
• modules-umd

Experimental

• class-properties
• do-expressions
• export-namespace-from
• function-sent
• nullish-coalescing-operator
• optional-chaining
• pipeline-operator
• throw-expressions

Check out our !

These plugins are in the minify repo.

• inline-consecutive-adds
• member-expression-literals
• minify-booleans
• minify-constant-folding
• minify-flip-comparisons
• minify-infinity
• minify-numeric-literals
• minify-simplify
• node-env-inline
• regexp-constructors
• remove-debugger
• simplify-comparison-operators

React

• react-display-name
• react-jsx
• react-jsx-self

Other

• flow-strip-types
• object-set-prototype-of-to-assign
• regenerator
• strict-mode

Syntax Plugins

These plugins only allow Babel to parse specific types of syntax (not transform).

Your .babelrc:

If the plugin is on npm, you can pass in the name of the plugin and babel will check that it's installed in node_modules

{
  "plugins": ["babel-plugin-myPlugin"]
}

You can also specify an relative/absolute path to your plugin.

{
  "plugins": ["./node_modules/asdf/plugin"]
}

Plugin Shorthand

If the name of the package is prefixed with babel-plugin-, you can use a shorthand:

This also works with scoped packages:

{
  "plugins": [
    "@org/babel-plugin-name",
    "@org/name" // equivalent
  ]
}

Plugin Ordering

This means if two transforms both visit the "Program" node, the transforms will run in either plugin or preset order.

• Plugins run before Presets.
• Plugin ordering is first to last.
• Preset ordering is reversed (last to first).For example:

  "plugins": ["transform-decorators-legacy", "transform-class-properties"]
}

Will run transform-decorators-legacy then transform-class-properties.

Will run in the following order: stage-2, react, then es2015.

This is mostly for ensuring backwards compatibility, since most users list "es2015" before "stage-0". For more information, see .

Both plugins and presets can have options specified by wrapping the name and an options object in an array inside your config.

For specifying no options, these are all equivalent:

{
  "plugins": ["pluginA", ["pluginA"], ["pluginA", {}]]
}

To specify an option, pass an object with the keys as the option names.

{
  "plugins": [
    [
      "transform-async-to-module-method",
      {
        "module": "bluebird",
      }
    ]
  ]
}

Settings options for presets works exactly the same:

Plugin Development

Please refer to the excellent to learn how to create your own plugins.

The simple plugin that reverses names (from the homepage):

export default function() {
  return {
    visitor: {
      Identifier(path) {
        const name = path.node.name;
        // reverse the name: JavaScript -> tpircSavaJ
        path.node.name = name
          .split("")
          .reverse()
          .join("");
      },
    },