- Working with Babel and JSX
- Working with Babel and Webpack
- BabelJs - Babel Presets
- BabelJs - Babel CLI
- BabelJs - Babel Polyfill
- BabelJs - Babel Plugins
- Transpile ES8 features to ES5
- Transpile ES7 features to ES5
- Transpile ES6 Modules to ES5
- Transpile ES6 features to ES5
- BabelJs - Project Setup Using Babel 7
- BabelJs - Project setup using Babel 6
- BabelJs - ES6 Code Execution
- BabelJs - CLI
- BabelJs - Environment Setup
- BabelJs - Overview
- BabelJs - Home
BabelJs Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
BabelJS - Babel Presets
Babel presets are config details to the babel-transpiler telpng it to transpile it in the specified mode. Here are some of the most popular presets we are going to discuss in this chapter −
ES2015
Env
React
We need to use presets that have the environment in which we want the code to be converted. For example, es2015 preset will convert the code to es5. Preset with value env will also convert to es5. It also has additional feature, i.e., options. In case you want the feature to be supported on recent versions of browsers, babel will convert the code only if there is no support of features on those browsers. With Preset react, Babel will transpile the code when to react.
To work with Presets, we need to create .babelrc file in our project root folder. To show the working, we will create a project setup as shown below.
command
npm init
We have to install the required babel preset as follows along with babel cp, babel core, etc.
Babel 6 packages
npm install babel-cp babel-core babel-preset-es2015 --save-dev
Babel 7 Packages
npm install @babel/cp @babel/core @babel/preset-env --save-dev
Note − babel-preset-es2015 is deprecated babel 7 onwards.
es2015 or @babel/env
Create .babelrc file in the root of the project (babel 6) −
In .babelrc, the presets is es2015. This is the indication to the babel compiler that we want the code to be converted to es2015.
For babel 7, we need to use presets as follows −
{ "presets":["@babel/env"] }
Here is the package.json after installation −
Since we have installed babel locally, we have added babel command in the scripts section in package.json.
Let us work on a simple example to check for the transpipng using preset es2015.
Example
main.js
let arrow = () => { return "this is es6 arrow function"; }
Transpiled to es5 as shown below.
command
npx babel main.js --out-file main_es5.js
main_es5.js
"use strict"; var arrow = function arrow() { return "this is es6 arrow function"; };
Env
Using Env preset, you can specify the environment you the final code to be transpiled to.
We are going to use the same project setup created above and change the presets from es2015 to env as shown below.
In addition, we need to install the babel-preset-env. We will execute the command given below to install the same.
command
npm install babel-preset-env --save-dev
We will compile main.js again and see the output.
main.js
let arrow = () => { return "this is es6 arrow function"; }
command
npx babel main.js --out-file main_env.js
main_env.js
"use strict"; var arrow = function arrow() { return "this is es6 arrow function"; };
We have seen the transpiled code is es5. Incase we know the environment in which our code is going to execute, we can use this preset to specify it. For example, if we specify the browsers as last 1 version for chrome and firefox as shown below.
command
npx babel main.js --out-file main_env.js
main_env.js
"use strict"; let arrow = () => { return "this is es6 arrow function"; };
We are now getting the arrow function syntax as it is. It is not transpiled into ES5 syntax. This is because the environment which we want our code to support, already has support for the arrow function.
Babel takes care of compipng the code based on environment using the babel-preset-env. We can also target the compilation based on the nodejs environment as shown below
The final compilation of the code is as shown below.
command
npx babel main.js --out-file main_env.js
main_env.js
"use strict"; let arrow = () => { return "this is es6 arrow function"; };
Babel compiles the code as per the current version of nodejs.
React Preset
We can use react preset when we are using Reactjs. We will work on a simple example and use react preset to see the output.
To use the preset, we need to install babel-preset-react (babel 6) as follows −
npm install --save-dev babel-preset-react
For babel 7, it is as follows −
npm install --save-dev @babel/preset-react
Changes to .babelrc are as follows for babel6 −
For babel 7
{ "presets": ["@babel/preset-react"] }
main.js
<h1>Hello, world!</h1>
command
npx babel main.js --out-file main_env.js
main_env.js
React.createElement( "h1", null, "Hello, world!" );
The code from main.js is converted to reactjs syntax with preset:react.
Advertisements