在 Babel 中转换插件与语法插件

Transform plugin vs Syntax plugin in Babel

本文关键字：插件 语法 转换 Babel      更新时间：2023-09-26

我想在我的 webpack 设置中使用Class properties。在这本书（www.survivejs.com）之后，我注意到作者在.babelrc文件中添加了 2 个插件：babel-plugin-syntax-class-properties 和 babel-plugin-transform-class-properties 。

看看syntax-class-properties的 babel 文档，它指出：

仅语法

这个

插件只允许 Babel 解析这个语法。如果你 想要转换它，请参阅转换类属性。

有什么区别？我两者都需要吗？我的代码似乎仅使用转换插件即可正常运行。

转换过程分为三个步骤：

  1. 将源代码解析为 AST
  2. 更改/转换 AST
  3. 打印 AST（转换为源代码）

语法插件对于第 1 步是必需的：诸如类属性之类的建议引入了一种新的语法，当前的 JavaScript 解析器无法解析该语法。语法插件扩展了解析器，使其能够理解新语法。

示例：假设我引入了一个新的令牌@，例如在

@.foo();

JavaScript 解析器无法将此代码解析为 AST，因为当前@在该位置无效。所以我必须扩展解析器来解析它。

转换插件对于第 2 步是必需的：现在源代码被解析了，我们需要将新功能的 AST 节点转换为在当前 JavaScript 中有效的东西。

示例：我上一个示例中的@是一种引用this的新方法。为了使它在当前不理解@的环境中工作，我需要将其转换为this，以便上面的例子变成

this.foo();

我两者都需要吗？

如果你想将你的代码转换为ES5，是的。

我的代码似乎仅使用转换插件即可正常运行。

您可能正在使用已包含语法插件的预设。

如果你

看 https://babeljs.io/docs/plugins/#transform 它说

转换插件将启用相应的语法插件，因此您不必同时指定两者。

虽然也许应该在所有语法插件中添加它？随意提出一个问题/公关。

相关文章：