Babel 插件运行顺序答案

【问题标题】：Babel plugins run orderBabel 插件运行顺序
【发布时间】：2016-01-05 18:27:53
【问题描述】：

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 之前。然而，主要问题保持不变 - 管道中插件的顺序应该以某种方式确定和配置。

【问题讨论】：

标签： plugins transformation babeljs commutativity

【解决方案1】：

插件的顺序基于您.babelrc 中的内容顺序，插件在预设之前运行，每个组在较早的插件/预设之前运行后面的插件/预设。

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

【讨论】：

谢谢，但即使我的 .babelrc 被禁用并且我的“插件顺序”（例如plugins: ['transform-es2015-arrow-functions', 'path_to_myplugin']），transform-es2015-arrow-functions 的输入功能显然在 myplugin 的输入功能之后被调用。为什么会这样？有没有办法在 babel 中配置插件顺序（除了处理预设，这不是很细粒度的控制）？
另外，你写了'......并且每个组在早期的插件/预设之前运行后来的插件/预设。'。你能解释一下“组”是什么意思吗？
我也有类似的情况。您是否有另一个更高范围的访问者功能，可能是 Program 与您的实际访问者调用 path.traverse？我想这会被首先调用。
@loganfsmyth - 我看到插件按顺序运行。 gist.github.com/jamestalmage/…
webpack 的 UglifyJs 插件有时会失败，因为 lambda 没有转换为函数，所以我遇到了不确定的错误。真的很想知道发生了什么XD

【解决方案2】：

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

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

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

【讨论】：

学习：如果你以前没有什么经验，在你学习的第一年或第二年忘记正常的社交生活（我在这里很慷慨）。
只需使用 AST Explorer。