Plugins

Babel is a compiler (source code => output code). Like many other compilers it runs in 3 stages: parsing, transforming, and printing.

Now, out of the box Babel doesn’t do anything. It basically acts like const babel = code => code; 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.

Transform Plugins

These plugins apply transformations to your code.

Transform plugins will enable the corresponding syntax plugin so you don’t have to specify both.

ES3

ES5

ES2015

ES2016

ES2017

ES2018

Modules

Experimental

Minification

Check out our minifier based on Babel!

These plugins are in the minify repo.

React

Other

Syntax Plugins

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

NOTE: transform plugins automatically enable the syntax plugins. So you don’t need to specify the syntax plugin if the corresponding transform plugin is used already.

Alternatively, you can also provide any plugins option from the Babel parser:

Your .babelrc:

  1. {
  2.   "parserOpts": {
  3.     "plugins": ["jsx", "flow"]
  4.   }
  5. }

Plugin/Preset Paths

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

  1. {
  2.   "plugins": ["babel-plugin-myPlugin"]
  3. }

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

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

Plugin Shorthand

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

  1. {
  2.   "plugins": [
  3.     "myPlugin",
  4.     "babel-plugin-myPlugin" // equivalent
  5.   ]
  6. }

This also works with scoped packages:

  1. {
  2.   "plugins": [
  3.     "@org/babel-plugin-name",
  4.     "@org/name" // equivalent
  5.   ]
  6. }

Plugin Ordering

Ordering matters for each visitor in the plugin.

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:

  1. {
  2.   "plugins": ["transform-decorators-legacy", "transform-class-properties"]
  3. }

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

It is important to remember that with presets, the order is reversed. The following:

  1. {
  2.   "presets": ["@babel/preset-env", "@babel/preset-react"]
  3. }

Will run in the following order: @babel/preset-react then @babel/preset-env.

Plugin Options

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:

  1. {
  2.   "plugins": ["pluginA", ["pluginA"], ["pluginA", {}]]
  3. }

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

  1. {
  2.   "plugins": [
  3.     [
  4.       "transform-async-to-module-method",
  5.       {
  6.         "module": "bluebird",
  7.         "method": "coroutine"
  8.       }
  9.     ]
  10.   ]
  11. }

Settings options for presets works exactly the same:

  1. {
  2.   "presets": [
  3.     [
  4.       "env",
  5.       {
  6.         "loose": true,
  7.         "modules": false
  8.       }
  9.     ]
  10.   ]
  11. }

Plugin Development

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

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

  1. export default function() {
  2.   return {
  3.     visitor: {
  4.       Identifier(path) {
  5.         const name = path.node.name;
  6.         // reverse the name: JavaScript -> tpircSavaJ
  7.         path.node.name = name
  8.           .split("")
  9.           .reverse()
  10.           .join("");
  11.       },
  12.     },
  13.   };
  14. }