Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Babel plugins run order

TL;DR: Is there a way how to specify the order in which the Babel plugins are supposed to be run? How does Babel determine this order? Is there any spec how this works apart from diving into Babel sources?

I'm developing my own Babel plugin. I noticed, that when I run it, my plugin is run before other es2015 plugins. For example having code such as:

const a = () => 1

and visitor such as:

visitor: {
  ArrowFunctionExpression(path) {
    console.log('ArrowFunction')
  },
  FunctionExpression(path) {
    console.log('Function')
  },
}

my plugin observes ArrowFunction (and not Function). I played with the order in which the plugins are listed in Babel configuration, but that didn't change anything:

plugins: ['path_to_myplugin', 'transform-es2015-arrow-functions'],
plugins: ['transform-es2015-arrow-functions', 'path_to_myplugin'],

OTOH, this looks like the order DOES somehow matter:

https://phabricator.babeljs.io/T6719

---- EDIT ----

I found out that if I write my visitor as follows:

  ArrowFunctionExpression: {
    enter(path) {
      console.log('ArrowFunction')
    }
  },
  FunctionExpression: {
    exit(path) {
      console.log('Function')
    }
  },

both functions are called. So it looks like the order of execution is: myplugin_enter -> other_plugin -> myplugin_exit. In other words, myplugin seems to be before other_plugin in some internal pipeline. The main question however stays the same - the order of plugins in the pipeline should be determined & configurable somehow.

like image 655
Tomas Kulich Avatar asked Jan 05 '16 18:01

Tomas Kulich


People also ask

Does Babel preset order matter?

Ordering matters for each visitor in the plugin. This means if two transforms both visit “Program”, the transforms will run in either plugin or preset order.

Where do I put Babel plugins?

Using a Plugin 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 . This is added to the plugins config option, which takes an array. You can also specify an relative/absolute path to your plugin.

How do you run code in Babel?

Simply add a "scripts" field to your package. json and put the babel command inside there as build . This will run Babel the same way as before and the output will be present in lib directory, only now we are using a local copy. Alternatively, you can reference the babel cli inside of node_modules .


1 Answers

The order of plugins is based on the order of things in your .babelrc with plugins running before presets, and each group running later plugins/presets before earlier ones.

The key thing though is that the ordering is per AST Node. Each plugin does not do a full traversal, Babel does a single traversal running all plugins in parallel, with each node processed one at a time running each handler for each plugin.

like image 96
loganfsmyth Avatar answered Sep 23 '22 19:09

loganfsmyth