We now have a youtube channel. Subscribe!

Babel.js | Project Setup using Babel 7

Babel.js | Project Setup using Babel 7


Hello folks! Welcome back to a new section of our tutorial on Babel.js. In this section of our tutorial on Babel.js, we will be studying about how to setup a project using Babel 7.

The latest version of Babel, 7 released with changes to the already existing packages. The installation part is the same as it was for Babel 6. The only difference in Babel 7 is that all the packages needs to be installed with @babel/, for example @babel/polyfill, @babel/core, @babel/preset-env, etc.

Here is a project setup created using Babel 7.

Command

Execute the following command to start the project setup -

npm init

Install following packages

npm install --save-dev @babel/core
npm install --save-dev @babel/cli
npm install --save-dev @babel/preset-env

Here is the package.json created -

install_packages

Now we will create a .babelrc file in the root folder -

create_babelrc

Create a folder src/ and add file main.js to it and write your code to transpile to es5.


src/main.js

let add = (a,b) => {
   return a+b;
}

command to transpile

npx babel src/main.js --out-file main_es5.js

main_es5.js

"use strict";

var add = function add(a, b) {
   return a + b;
};

The workings of Babel 7 stays the same as Babel 6. The only difference is the package installation with @babel.

There are some presets deprecated in babel 7. The list is as follows -

  • ES20xx presets
  • babel-preset-env
  • babel-preset-latest
  • Stage presets in Babel

Also the year from the packages is removed - @babel/plugin-transform-es2015-classes is now @babel/plugin-transform-classes.

We're going to look at one more example of working with typescript and transpile it to Es2015 JavaScript utilizing typescript preset and babel 7.

To work with typescript, we need typescript package to be installed as follows -

npm install --save-dev @babel/preset-typescript

Create test.ts file in the scr/ folder and write the code in typescript form -

test.ts

let getName = (person: string) => {
   return "Hello, " + person;
}

getName("Siya");

babelrc

babelrc_typescript

command

npx babel src/test.ts --out-file test.js

test.js

"use strict";

var getName = function getName(person) {
   return "Hello, " + person;
};

getName("Kennedy");


Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we will be discussing about how to transpile ES6 features to ES5.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2022 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain