javascript - Babel 中的转换插件与语法插件

Question

我想在我的 webpack 设置中使用 Class properties。跟着这本书 (www.survivejs.com)，我注意到作者在 .babelrc 文件中添加了 2 个插件:babel-plugin-syntax-class-propertiesas以及 babel-plugin-transform-class-properties。

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

Syntax only

This plugin only allows Babel to parse this syntax. If you want to transform it then see transform-class-properties.

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

Answer 1

转换过程分为三个步骤:

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

Syntax 插件是第 1 步所必需的:类属性等提案引入了一种新的语法，当前的 JavaScript 解析器无法对其进行解析。语法插件扩展了解析器，使其能够理解新语法。

示例:假设我引入了一个新的标记@，比如在

@.foo();

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

Transform 插件对于第 2 步是必需的:既然源代码已经被解析，我们需要将新特性的 AST 节点转换成在当前 JavaScript 中有效的东西。

示例:我之前示例中的@ 是一种引用this 的新方法。为了让它在当前不理解@的环境中工作，我需要将其转换并替换为this，这样上面的例子就变成了

this.foo();

And do I need both?

如果您想将代码转换为 ES5，可以。

My code seem to run fine just with the transform plugin.

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