Question

TL; DR：有没有办法指定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 - ＆gt; other_plugin - ＆gt; myplugin_exit。换句话说，myplugin似乎在某个内部管道中的other_plugin之前。然而，主要问题保持不变 - 应确定管道中插件的顺序。可以某种方式配置。

Answer 1

插件的顺序基于.babelrc中预设之前运行插件的事物的顺序，并且每个组在之前的插件之前运行插件/预设。

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

Answer 2

基本上，@ loganfsmyth写的是正确的;插件排序本身（可能）没有更多的魔力。

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

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

Babel插件运行顺序

2 个答案: