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

Question

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

看看syntax-class-properties它的巴贝尔文档说:

仅限语法

此插件仅允许Babel解析此语法.如果要转换它,请参阅transform-class-properties.

有什么不同？我需要两个吗？我的代码似乎只是使用转换插件运行良好.

Answer 1

转型是一个三步过程:

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

语法插件是第1步所必需的:诸如类属性之类的提议引入了一种新语法,当前的JavaScript解析器无法对其进行解析.语法插件扩展了解析器,因此它理解新语法.

示例:想象一下,我引入了一个新的令牌@,例如in

@.foo();

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

转换插件是第2步所必需的:现在解析了源代码,我们需要将新功能的AST节点转换为在当前JavaScript中有效的内容.

示例:@在我之前的示例中是一种新的引用方式this.为了使它在当前不理解的环境中工作@,我需要对其进行转换和替换this,以便上面的示例成为

this.foo();

我需要两个吗？

如果要将代码转换为ES5,是的.

我的代码似乎只是使用转换插件运行良好.

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

Answer 2

如果您查看https://babeljs.io/docs/plugins/#transform，它会说

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

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