I lied, I will not be -ing (explain like I’m 5) babel today. Instead, I will try and babel. I only wish that someone would have had this conversation with me when I first heard of babel. It’s never too late I suppose :). Let’s begin. ELI5 ELIN (explain like I’m new) : This article is based on the current version of babel (v6 as of writing). There are some drastic change with v7 and the article will be updated to reflect the same in the near future. Note : AFAIK, create-react-app uses babel. Seems like an interesting tool if I want to continue using all bleeding edge JS features. What’s the npm package I need to kick things off? Past Me : Not so fast mister! First, let us talk about what Babel is. As per the : Current Me documentation Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments Cool, so anything I write (TypeScript or ES6+) can be converted into ES5 which the browsers can understand. That’s awesome, anything else I need to know before I start off? Past Me: Yes, a couple of things. Babel, a.k.a. @babel/core, in itself is just a shell, it takes your code in and spits it out as is. What you do need are plugins which basically do the processing and transformations on your code. Current Me: Oh, okay. How do I get the plugins? Surely someone has created a library of these plugins, right? PM: That’s right, there are a lot of plugins that are available on the npm registry that you can install and use based on your project. Plugins range from simple transformations such as to more complex and sophisticated plugins such as . CM: transformation of arrow functions transformation of module systems You need to identify the plugins that you are going to need and import them as a devDependency to your project. So importing as a devDependency is going to be enough for getting my application to work as expected? PM: Yes. Almost. You need to further tell babel that you want it to pick certain plugins and apply them to your code. The simplest and also the recommended way of doing it is using the .babelrc file, which you can create at the root of your project, and add the plugins array in it. CM: { 
    "plugins": ["@babel/plugin-transform-arrow-functions"] 
} Alternatively, you can create and add your custom plugin and optionally pass additional parameters to it. { 
    "plugins": [
        ["name", {
           "option1": "value1",
           "option2": "value2"
        }]
    ] 
} Also, don’t forget, you need to include babel itself into your project. If you use webpack, you can use babel-loader which can be applied . via a rule That does not sound sound very easy though. Will I have to add each and every one of these plugins based on what ES6+ or TypeScript feature I want to use? PM: Absolutely not! That’s why there are presets. A developer should not have to put this list of plugins together for each project. Just use the most logical preset for your project and add additional plugins or presets as necessary. Currently, only a handful of presets are supported officially. Although there are , it is unlikely that you will need them in majority of the cases. CM: lot of plugins available What are the official presets? Do they support React? PM: They most certainly do, there are four main plugins: CM: : Makes your code compatible with the latest version of JavaScript (ES2017 as of now). It adds as needed. It can accept a to support any and all of your wishes. @babel/preset-env polyfills plethora of options : If you are using in your project for static type checking, you can use the preset-flow preset which comes with useful for stripping out the type checks that we add in our code. @babel/preset-flow flow @babel/plugin-transform-flow-strip-types : Provides you all the , most important one transforms JSX to JS. @babel/preset-react react specific plugins : Transforms your TS code to JS using all the @babel/preset-typescript plugins necessary. Babel also provides support for experimental features of JS which are provided in what is called stages of . There are total of 5 stages, last one being the standardization of the feature. If you want, there are presets available in npm under the name @babel/preset-stage-STAGE_NUMBER which can be included in your project as you see fit. Use them wisely. standardization by TC39 Cool! One last question- in my create-react-app based app, I see the babel preset used is react-app how is that different from the @babel/preset-react? PM: Great question! If you look at the that the create-react-app based projects use. You can see that they are using a lot more than the relatively simpler @babel/preset-react preset. They combine what they believe to be useful for anyone building applications using the create-react-app CLI. If you are not using the CLI then you are free to use whatever plugins and presets that you deem fit. CM: description of all the plugins and packages Awesome! I guess I am ready to start using babel then. Thanks! you can go back to the future now. PM: Sure thing :D. Do not forget to go through the n, and of babel. CM: documentatio faqs understand the caveats For advanced understanding of the internal workings of babel, refer to . the architectural handbook If you enjoyed this blog be sure to give it a few claps, read more or follow me on LinkedIn .

Too Long; Didn't Read

Making security fun one episode at a time

ELI5: Babel and the gang

Too Long; Didn't Read

Kashyap Mukkamala

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

ELI5: Babel and the gang

Too Long; Didn't Read

Kashyap Mukkamala

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES