What do you know about the Modern Web Stack: Babel?

With the aid of the program Babel, you can write Javascript code with the newest syntax and features while still running it in browsers that might not support them. Your contemporary JS code will be converted by Babel into an older form of Javscript that more browsers can understand.

Babel is a toolchain used primarily for converting ECMAScript 2015+ code into backwards-compatible versions of JavaScript in current and legacy browsers or environments. ECMAScript 2015+ supports ES6+.

First go to Babel’s official website and click the Docs button.

The Babel-transpiler transforms contemporary JavaScript syntax into a format that is simple enough for older browsers to understand. For instance, function, var, and other classes will be converted from arrow function, const, and let classes. Here, the arrow function’s syntax is changed to a standard function while preserving its functionality in both situations.

Here is the list of ECMA Script features available in JavaScript, which can be transpiled and polyfilled −

• Classes
• Decorators
• Const
• Modules
• Destructing
• Default parameters
• Computed property names
• Object rest/spread
• Async functions
• Arrow functions
• Rest parameters
• Spread
• Template Literals

There are JavaScript features that can’t be transformed syntactically, usually because there’s no equivalent functionality implemented — for example, Promises and generator functions.

ECMA Script features that can be polyfilled −

• Promises
• Map
• Set
• Symbol
• Weakmap
• Weakset
• includess
• Array.from, Array.of,Array#find,Array.buffer, Array#findIndex
• Object.assign,Object.entries,Object.values

Features of Babel:

Babel-Plugins

Plugins and Presets are config details for Babel to transpile the code.

Babel-Presets

Babel presets are a set of plugins, i.e., config details to the babel-transpiler that instruct Babel to transpile in a specific mode.

Babel-Polyfills

There are some features like methods and objects, which cannot be transpiled.

You can think of polyfill as a source code. It stores sources of all the es6 new features.

ES5 + polyfill = ES6.

Babel-cli

Babel-cli comes with a bunch of commands where the code can be easily compiled on the command line. 

Advantages:

• All of the recently introduced features to JavaScript are backwards compatible with BabelJS, which can be used in any browser.
• ES6, ES7, ESNext, and other future JavaScript versions can all be transpiled with BabelJS.
• BabelJS is extremely strong and can be used with large projects, making life easier for developers. It can be used with gulp, webpack, flow, react, typescript, etc.
• BabelJS may be compiled in JSX form and is compatible with the react JSX syntax.
• BabelJS makes it simple to deal with large projects thanks to its support for plugins, polyfills, and babel-cli.

Installing Babel:

• @babel/core – This is the main engine that knows how to transform code based on a set of instructions it is given
• @babel/cli – This is the actual program we are going to run to trigger the core engine and output a transformed Javascript file
• @babel/preset-env – This is a preset that tells the core engine what kind of transformations to make. It looks at your environment (in our case it will be our package.json file) to determine what kind of changes need to be made depending on the browsers you wish to support.

The first step to set up Babel in a project is to install the package using npm and add it as a dev dependency. Assuming you have a working Node.js environment already in place, it’s just a matter of running the following in your terminal:

mkdir babel-test
cd babel-test
npm init -y
npm install --save-dev babel-cli

Next, we can open package.json and add a build command to our npm scripts:

"scripts": {
  "build": "babel src -d dist"
}

But wait! Before running Babel we must install and set up the plugins that will transform our code. The easiest and quickest way to do this is to add the Env preset, which selects the appropriate plugins depending on the target browsers that you indicate. It can be installed using:

npm install babel-preset-env --save-dev

Then create a .babelrc file in the root of your project and add the preset:

{
  "presets": ["env"]
}

The .babelrc file is the place where you put all your settings for Babel. You’ll be using this primarily for setting up presets and plugins, but a lot more options are available. You can check the complete list in the Babel API page.

Alternatives

The most popular option is TypeScript, which is regular JavaScript that implements modern ES features but also adds others, especially regarding type safety.