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 writer 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.

2 Answers
2

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.

.babelrc

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.

Thanks, but even with my .babelrc disabled and my 'plugin order' such as plugins: ['transform-es2015-arrow-functions', 'path_to_myplugin'], transform-es2015-arrow-functions's enter function is obviously called AFTER myplugin's enter function. Why is this so? Is there a way to configure the plugin order in babel (apart from dealing with presets, which is not very granular kind of control)?
– Tomas Kulich
Jan 5 '16 at 22:02

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

Also, you wrote '... and each group running later plugins/presets before earlier ones.'. Could you please explain, what you mean by 'group'?
– Tomas Kulich
Jan 5 '16 at 22:04

I have a similar situation. Do you have another visitor function in a higher scope, possibly for Program that calls path.traverse with your actual visitors? I imagine this would be called first than.
– Fabian Zeindl
Feb 6 '16 at 17:19

Program

path.traverse

@loganfsmyth - I see the plugins run in order. gist.github.com/jamestalmage/…
– James Talmage
Apr 3 '16 at 19:03

I'm getting non-deterministic errors with webpack's UglifyJs plugin sometimes failing because a lambda didn't get transformed into a function. Really wondering what's going on XD
– Andy
Oct 29 '16 at 15:50

Basically, what @loganfsmyth wrote is correct; there is (probably) no more magic in plugin ordering itself.

As for the my problem specifically, my confusion was caused by how arrow function transformation works. Even if the babel-plugin-transform-es2015-arrow-functions plugin mangles the code sooner than my plugin, it does not remove the original arrow-function ast node from the ast, so even the later plugin sees it.

babel-plugin-transform-es2015-arrow-functions

Learning: when dealing with Babel, don't underestimate the amount of debug print statements needed to understand what's happening.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.