Getting Started With Babel - Transpiling Javascript
In this video you will learn what is babel and why do we need it in Javascript. So let's jump right into it.
Javascript is really problematic language to use because it's being executed in different browsers. And each browser decides what set of features from Javascript is supported there. And if we are talking about new features then all browsers add support for them in different time. And old browsers can never get support of this new features.
For example let's look on async await feature. Actually if you don't know what is async await I already made a video on that. I will link it in the description below.
This feature was introduced really long ago so all major browsers support it out of the box. But if you need to support projects with IE11 for example then you have a problem. And here we talk only about a single feature.
What do we do if this feature is not supported in IE for example? We need to write a fallback to some old code that will work on IE. But it is time consuming and doing it for every project is absurd.
This is why we have tools that can make sure that our code and all new features will work in all browsers. This means that we just write any version of Javascript that we want, then we need some tools where we want to specify what browsers we support and it will prepare our code in a way that it will work in all browsers.
The most popular tool for this is babel. This is a Javascript transpiler. Which means it takes your code and transpile it to be supported in all browsers.
Let's check this out
const getItem = async () => {
const result = await fetch("http://google.com");
};
getItem();
So here I wrote an async await function to fetch some data. Now we need to install several packages to use babel for transpilation.
npm install @babel/cli
npm install @babel/core
npm install @babel/preset-env
So core contains the functionality of babel. Cli is needed to call babel commands from the console and preset-env is needed to do magic with browser versions that you will see in a second.
Now we need to add babel to our script because we want to use cli command from node_modules which is not installed globally.
"scripts": {
"babel": "babel"
},
Now we need to create a config file for babel
.babelrc
json
{
"presets": [
[
"@babel/preset-env"
]
]
}
So here we just specified our packages preset-env for babel. Now let's try to use babel from console
babel main.js --out-file main.dist.js
As you can see we have main.dist.js now. Also by default babel transpiles all our code to ES5 which is fine but not the best approach. This means that all stuff like const, let, async, arrow functions and so on will be always, no matter what browsers we support transpiled to ES5. So we get ES5 code which implements this features. And actually it's not the best way to do it because by specifying what browsers we want to support we avoid transpiling of the code that is supported natively by our browsers. If you support IE11 it makes total sense to transpile async await function to ES5. But if you support only edge for example that it's not needed.
Let's try to add browsers to our config.
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"ie": "11"
}
}
]
]
}
This means that we support browsers starting with IE11. As you can see our output won't be changed because async await doesn't work in IE11. But let's say that we are modern company that doesn't support IE11 which is already quite old. We can specify that we support starting from Edge 17 for example.
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"edge": "17"
}
}
]
]
}
This changes everything and as you can see our async await function is not transpiled anymore because it is supported natively in Edge and we shouldn't blown our javascript with ES5 code.
So the good way to work with Babel is to always know what browsers your project or your company supports. And avoid supporting old browsers if you don't need to. So I would specify here versions for Edge, Firefox, Chrome and Safari.
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
},
One more point for Babel is that there are nice presents for React and even Typescript. Which means that babel can transpile them both to plain Javascript which is amazing. So you just install this presets and you are good to go.
And the last thing that I want to mention in that Babel is used in almost all Frameworks or Tools. If you are using for example Create-react-app to generate your React project Babel is already hidden there under the hood. You don't see it directly but all code that you are writing is being transpiled with Babel.
So actually Javascript is a language which will never exist without Babel or a similar tool. We get new features in Javascript every single day and it's not possible that all browsers support it natively. Also there are lots of companies which are still using IE 8 or even older that can't update easily their software. This is why we will use Babel and transpile Javascript until the end of our life.
Want to conquer your next JavaScript interview? Download my FREE PDF - Pass Your JS Interview with Confidence and start preparing for success today!
