How to use Babel after your project is finished
One of the most important distinctions between ES5 and ES6 and ES7 is that ES6 and ES7 JavaScript cannot be directly produced in web browsers. This is one of the primary distinctions between the three versions. We will need to make use of a transpiler known as Babel.js in order to generate JavaScript that is backwards-compatible and readable by older browsers.
Because of Babel, you will be able to use the functionality and syntax of ES6 in your project. Babel will then translate it to ES5 so that you may use it in production.
In order for Babel to function properly while your project is being created, you will need to ensure that your project contains a file named package.json. This directory will hold all of the dependencies that are required for your project and will be referred to as such.
After making sure that Node and npm are installed on your computer (or Node and Yarn, if you would rather use Yarn), open the terminal on your computer and execute the npm init or the yarn init command, depending on which one you wish to use. In addition to the package, we would appreciate it if you could respond to the questions that have been posed. package.json will already have those values pre-filled in it when it's created.
By utilizing npm/yarn and the following command, you will be able to add babel to the list of prerequisites that you have.
/ / or
yarn add babel-cli --dev
You will configure your build command utilizing Babel by using the scripts field that is located within the package.json file that you are using. The specific command that you need to use will be different for each folder that you build from and the folder that you want to build to. Both of these folders must be present for the building process to be successful.
Make a .babelrc file and save it in the root folder of your project. This is the same folder that contains the package.json file. This is a configuration file for Babel, and its goal is to direct Babel to transform your code to format that is compatible with ES5. You may install the preset by following these steps:
/ / or
yarn add babel-preset-env --dev
After that, define it in the .babelrc file that you use by entering the following:
{
“presets”: [“env”]
}Now, you can start Babel by running the build command. This was not available before. The only thing that should be different about the appearance of your destination folder now compared to the appearance of your origin folder is that the code inside your destination folder should be written in ES5 rather than ES6.
If you are using a JavaScript library or framework such as create-react-app, the Babel is probably already configured for you, so you won't have to worry about that aspect of the development process. Because of this, there is no longer any need for you to accomplish that. This relates to endeavors that are built from the ground up from the very beginning.
