Browser compatibility — Using Babel from ES6 to ES5

Felipe Valdivia
Aug 24, 2017 · 4 min read
Babel js tutorial

Hello everyone this is my second article on medium I’ve been very busy the past months learning FrontEnd and improving my skills in Javascript, right now I am doing a course to learn reactJs online so probably I’m gonna start posting more often just because I like to share my new knowledge and of course is a way to learn try to teach other people what you learned. So let’s go !

What is Babel ?

Ok I am gonna start saying that babel is a transpiler for javascript, what this mean ? that if we are working with ES6 (Ecma Script 6) babel can convert our code from ES6 to ES5 (Ecma Script 5), so why as a programers we should do this or think about doing this? because usually not all the browsers can interpret our ES6 so you are going to need to have a version of your code that it have compatibility with the majority of the browsers. so if you wanna know more about babel here is a link to the website ;)

How to install and use Babel ?

First of all I wanna say that I am working in a macbook pro so all the examples and steps have been thinking in macbook users.

so first we need to install nodeJs in our machines so is going to be easier to install the package and dependences of Babel so for this we can run in our terminal the next code:

  • brew install node

yes just with that line we can install node in our machines is amazing right ? so if you wanna make sure that node it was installed right just run this command in your terminal:

  • node -v

should show you something like this:

So once we have node installed in our machines we can install babel in our project so in this case I have a project called Minesweeper and I need to install babel packages so the first thing that we are going to do is run this command:

  • npm install babel-cli -D

so what babel-cli means ? this is going to install the package of babel that include the commands tools and after that we need to run this code:

  • npm install babel-preset-env -D

and this command line or babel package contains all the features of ES6 and the older version too so this is going to permit that babel maps for older version to transpile the code for us.

ok we already have babel in our project what’s next ?

we need to create a file called package.js in our project, this file is going to store all the information about our project including that we are going to use babel so to create this file we need to run this command in our root project:

  • npm init

so we are going to have something like this:

Yay we have our babel packages installed and we just created our package.js file that is going to contain all the information about our project so now we can start setting up babel in our project, and the first thing that we are going to do is to create a file called .babelrc in our root project and inside write this code:

and our directory is going to look something like this:

After this we just need to edit our package.js and add the command that we are going to use to run babel and convert our ES6 code to ES5 so for that you need to add this code in the section called scripts inside package.js:

So now we are ready to use babel in our project and transpile javascript from ES6 to ES5 we just need to use this code in our terminal to make it work:

  • npm run build

And your are going to get a directory like this after running babel in your project :

Conclusion

This was a basic tutorial about how to transpile ES6 to ES5 if you are aspiring to be a Front End engineer like me this is a tool that you may use frequently so is good to practice and use it in your projects. I hope you liked it and if you have any question just leave a comment or if you have feed back for me I would really appreciate that too.

Probably next week I am gonna have a new article about Front End.

Thanks !

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

)

Felipe Valdivia

Written by

Web and iOS developer that help startups go from a great idea to having a polished website or app in the hands of their users

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade