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).
A preset is a set of plugins used to support particular language features. You use presets to take advantage of the latest JavaScript features that haven't yet been implemented in browsers. Presets will transform your source code and syntax to be compatible with native JavaScript which browsers understand. For example, the
@babel/preset-react will allow you to write JSX (JavaScript as XML) style code, which is commonly used to define React components, although JSX isn't naturally understood by the browser.
So what's the deal with the babel-preset-airbnb preset?
Well AirBnb decided to create a guide to present a "reasonable approach to writing JavaScript" since everyone writes JavaScript differently. Ideally, this guide gives a greater sense of structure and order to JavaScript applications. The entire guidelines can be found here, where AirBnb describes their conventions or advice for writing more maintainable JavaScript.
So as for your question:
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?
Yes, the purpose of presets, in general, is to translate your code into industry standards currently understood by the browsers. So the preset provided by the AirBnb team will transpile your code according to their style guide mentioned above. As for the second part of your question, personally I would since they're good coding conventions and it's never a bad thing to write code the right way and have it stick to muscle memory.
Now as for why the code is minified?
Most people minify their JavaScript code prior to releasing to production to reduce the number of bytes needed to be downloaded by browser to run their web application. This is why when you inspect code most of the time it's minified code. With that being said, the whole purpose of their preset is to transpile your code into code that conforms to their style guidelines.