Babel 插件运行顺序

Question

TL;DR：有没有办法指定 Babel 插件的顺序运行？ Babel 是如何确定这个顺序的？除了深入研究 Babel 资源之外，是否有任何说明这是如何工作的？

我正在开发自己的 Babel 插件。我注意到，当我运行它时，我的插件是运行在其他 es2015 插件之前。例如有如下代码：

const a = () => 1

和访问者如：

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

我的插件观察 ArrowFunction（而不是 Function）。我调整了插件在 Babel 配置中列出的顺序，但这并没有改变任何东西：

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

OTOH，这看起来顺序确实很重要：

https://phabricator.babeljs.io/T6719

---- 编辑 ----

我发现如果我这样写我的访客：

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

两个函数都被调用了。所以看起来执行顺序是：myplugin_enter -> other_plugin -> myplugin_exit。换句话说，myplugin 似乎在某些内部管道中 other_plugin 之前。然而，主要问题保持不变 - 管道中插件的顺序应该以某种方式确定和配置。

Answer 1

插件的顺序是基于你的.babelrc中的东西的顺序，插件运行在预设之前，每组运行在后面plugins/presets在前面.

关键是排序是按 AST 节点进行的。每个插件不进行完整遍历，Babel 进行一次遍历运行所有插件并行，每个节点一次处理一个运行每个插件的每个处理程序。

Answer 2

基本上，@loganfsmyth 写的是正确的；插件排序本身（可能）不再有魔力。

具体到我的问题，我的困惑是由箭头函数转换的工作原理引起的。即使 babel-plugin-transform-es2015-arrow-functions 插件比我的插件更早地破坏代码，它也不会从 ast 中删除原始箭头函数 ast 节点，所以即使是后来的插件也能看到它。

学习：在处理 Babel 时，不要低估了解正在发生的事情所需的调试打印语句的数量。

Babel 插件运行顺序

Babel plugins run order

plugins

transformation

commutativity

babeljs

Babel 插件 运行 顺序

Babel plugins run order

plugins

transformation

commutativity

babeljs

Babel 插件运行顺序