在Babel

Question

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

查看syntax-class-properties的babel文档：

  

仅限语法

     

此插件仅允许Babel解析此语法。如果你   想要转换它然后看转换类属性。

有什么区别？我需要两个吗？我的代码似乎只使用转换插件运行良好。

Answer 1

转型是一个三步过程：

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

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

示例：想象一下，我引入了一个新的令牌@，例如在

中

@.foo();

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

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

示例：我之前示例中的@是引用this的新方法。要使其在不理解@的当前环境中工作，我需要将其转换并替换为this，以便上面的示例变为

this.foo();

  

我是否需要两者？

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

  

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

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

Answer 2

如果你看https://babeljs.io/docs/plugins/#transform就说

  

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

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