Have you started a project for creating a website and got everything working? Your APIs, Requests, databases, and other codes not throwing an error. Great, now the only thing you have to do is bundle your code. You got webpack installed but what about the transcompiler, which
one is used, and is it good? Well, I’ve got one we can use and it is free to use, Babel. It’s not hard to set up and will only take under a minute to put in.
FunFacts
Babel is a free and open-source transcompiler for JavaScript. It was released to the world on September 28, 2014. The most stable version of it was released on January 8, 2014. Babel can also use plugins/libraries to help with certain syntax, mostly lines of code that use stuff like react code, CSS, SVG, and others. To use babel you need to have Node installed with npm.
Let start coding
First, let's start off by installing our dependencies for the package.json folder. If you don’t have one just run npm init.
Npm install @babel/core
Npm install @babel/cli
Npm install @babel/present-env
Now Let's create a file and add some code to it.
Let func = function(data){
return data + 255
}
//example code
Let hop test = false
Now let's set up our Babel file to tell Babel what to do and use. Create a present key in an object and give present one of the dependencies we install, @babel/present-env. This helps tell Babel what environment it will be using. For example, it could be running on Firefox, Safari, or the Chrome browser.
{
“present”: [
“@babel/present-env”
]
}
Next, to tell it which environment it will be working on we need to change the values in the present key a bit. First, we need to put “@babel/present-env” inside of an array. Then in the same array add an object with a target key. This key will hold what environment Babel will be working on, and what version.
{
“present”: [
[“@babel/present-env”, {
“targets” :{
“fireFox”: “17”,
“Chrome”: “67”,
“Safari”: “11.1”
}
}]
]
}
Finally, because we don’t have other codes to run Babel, we will have to run a command in the terminal to get it to work. This command will target a specific file and send it to a specific folder or file. If the specific output doesn't exist, the command will create the file/folder for use. After the command, go to the file you set to the output and see the result.
./node_modules/@babel/cli/bin/babel.js main.js –out-file main.dist.js
// use this command to check the current version
./node_modules/@babel/cli/bin/babel.js –version
Let’s say that you are working on a react project and you're also using babel. Now like a talk about Babel can’t handle certain syntax. There are plugins and other libraries you can install to help, let take a look at an example
{
“present”: [
“@babel/present-env”,
“@babel/react” // for react
],
“Plugins”:[
“@babel/plugin-syntax-dynamic-import”
]
Now that you have seen Babel and how exactly it works, why not try it out in your next project? Babel has multiple plugins and libraries for whatever type of project you’re doing. If you're interested in webpack that uses babel or react, I have done blogs on these topics before so when you have some time why not take a look?
https://dev.to/gagecantrelle/the-basics-of-react-57a1
https://dev.to/gagecantrelle/the-basics-of-webpack-2d71
Also if you are interested in what trans compiled code looks like, head to this site that will transcompile anything given to it. https://babeljs.io/
Links:
https://en.wikipedia.org/wiki/Babel_(transcompiler)
https://www.youtube.com/watch?v=o9hmjdmJLMU
https://medium.com/age-of-awareness/setup-react-with-webpack-and-babel-5114a14a47e9#bb4c
Top comments (0)