What does babel's airbnb preset actually do?

时间:2019-04-08 14:00:21

标签: javascript babel airbnb

I'm learning how to use webpack and babel to compile javascript for front-end applications, and I'm curious about the airbnb babel preset, which a lot of people seem to use when developing react applications. So a couple questions I have:

Does this preset translate any code into code which keeps to airbnb standards?

If so, is it necessary if I use the airbnb style guide anyways?

Additionally, I don't see why it is so necessary for someone who does not keep to the style. Does anyone ever read the compiled code (which is typically minified anyways)? In my experienced I've only read source code in their separate, original files. If that code is not already airbnb styled, I don't see what the advantage is of styling it in compilation -- at least for purposes of reading (I know some of the airbnb standards are for functionality, which does make sense).

1 个答案:

答案 0 :(得分:0)

预设是用于支持特定语言功能的插件的集。您可以使用预设利用尚未使用的最新JavaScript功能。已在浏览器中实现。预设将转换您的源代码和语法,使其与浏览器可以理解的本机JavaScript兼容。例如, @babel/preset-react允许您编写JSX(JavaScript作为XML)样式的代码,该代码通常用于定义React组件,尽管浏览器并不自然地理解JSX

那么babel-preset-airbnb预设有什么用?

好吧,AirBnb决定创建一个guide,以提出一种“合理的写作JavaScript的方法” ,因为每个人的写作方式JavaScript都不一样。理想情况下,本指南为JavaScript应用程序提供了更清晰的结构和顺序。可以在here,中找到整个指南,其中AirBnb描述了它们的约定或有关编写更易于维护的JavaScript的建议。

关于您的问题:

“此预设是否将任何代码转换为符合airbnb标准的代码?如果是这样,是否仍然需要使用airbnb样式指南?”

是的,预设的目的通常是将您的代码转换为浏览器当前可理解的行业标准。因此,AirBnb团队提供的预设将根据上述样式guide转换您的代码。至于您的问题的第二部分,我个人认为它们是好的编码约定,并且以正确的方式编写代码并将其保留在肌肉记忆中从来不是一件坏事。

现在为什么要缩小代码?

大多数人在发布产品之前将其JavaScript代码最小化,以减少浏览器运行其Web应用程序所需的字节数。这就是为什么当您大多数时候检查代码时,它是精简代码的原因。话虽如此,预设的全部目的是将您的代码转换为符合其样式准则的代码。

希望有帮助!