Static transpiling with Babel-CLI

When you develop large React application for production level in-line traspiling is not going to work. So we can do static transpiling with Babel CLI. We will see how to install the Babel CLI

Your source JS file is located at src\index.js

Your index file is loacated root of your working folder and it will have the following contents

First you can navigate to your working folder and run the following command in terminal

Then you can answer the question in command line and generate package.json file as shown in below

Next, I am going to install Babel-CLI

I will create another file called .babelrc in the working directory. This file will have all the presets that Babel needs to compile the JS code

Now you can install the preset using following command in your terminal

Now you can compile the source file located at src\index.js and put the compiled javascript file at dist folder

Now you can run the httpster command in terminal and open the index.html file on http://localhost:3333/

Finally you can do some adjustment to scripts section in package.json file so that you can start the webserver after compiling the jsvsscript code

Now you can run the following command in terminal and open the index.html file in http://localhost:3333/