Do we need Babel in every project?
Updated: Jul 27, 2020
Babel is a Javascript toolchain used to convert later versions of Javascript to es5 or EcmaScript 2009. Even though supporting the latest versions of Javascript in older functions is the core functionality of Babel, it is not it’s only functionality. It performs other tasks like transforming syntax, Code mods, polyfills, etc.
React JS uses a custom babe plugin to convert JSX to plain Javascript code, whereas VueJs uses a custom compiler to convert .vue files to plain Javascript.
JSX code
The above JSX code is converted to the following code snippet by Babel.
JSX code converted to JS
Using Babel as a compiler gives React developers the flexibility of a commonly used toolchain and the freedom to focus more on the library itself instead of spending too much time on building the compiler. Babel also helps developers use the latest Javascript features without worrying about support for said features in older browsers.
The beauty of Babel is that the changes are done during runtime, thus it does not affect performance greatly. Babel basically converts the latest Javascript syntax into equivalent syntax in ES5. This does not translate to reduced performance as most syntax changes after ES5 are just wrapper implementations with no or negligible performance improvement.
ES6 Arrow function
The above ES6 Arrow function is converted to the following by Babel
ES6 Arrow function converted to ES5 compatible function
However, with most modern browsers have already implemented nearly all features of es6 and with the latest version of NodeJs completely supporting es6, the requirement for Babel is reduced greatly.
However, writing code in React without Babel will make development very difficult. The only way to accomplish this is to use React API’s like React.createElement instead of JSX.
Babel is invaluable when the support of older browsers like IE10 & IE 11 etc is required. Babel also helps perform large scale refactors within the applications by code-mods (or code modifications) where old versions of a piece of code can be changed across the application during the build process instead of manually changing the code throughout the application which increases the possibility of errors.
In conclusion, Babel is not required for small projects which do not require older browser support or if the developer does not use Javascript syntax introduced after ES5.