BabelJS - Overview

BabelJS is a JavaScript transpiler which transpiles new features into old standard. With this, the features can be run on both old and new browsers, hassle-free. An Australian developer, Sebastian McKenzie started BabelJS.

Why BabelJS?

JavaScript is the language that the browser understands. We use different browsers to run our applications − Chrome, Firefox, Internet Explorer, Microsoft Edge, Opera, UC browser etc. ECMA Script is the JavaScript language specification; the ECMA Script 2015 ES5 is the stable version which works fine in all new and old browsers.

After ES5, we have had ES6, ES7, and ES8. ES6 released with a lot of new features which are not fully supported by all browsers. The same applies to ES7, ES8 and ESNext (next version of ECMA Script). It is now uncertain when it will be possible for all browsers to be compatible with all the ES versions that released.

Incase we plan to use ES6 or ES7 or ES8 features to write our code it will tend to break in some old browsers because of lack of support of the new changes. Therefore, if we want to use new features of ECMA Script in our code and want to run it on all possible browsers available, we need a tool that will compile our final code in ES5.

Babel does the same and it is called a transpiler that transpiles the code in the ECMA Script version that we want. It has features like presets and plugins, which configure the ECMA version we need to transpile our code. With Babel, developers can write their code using the new features in JavaScript. The users can get the codes transpiled using Babel; the codes can later be used in any browsers without any issues.

The following table lists down the features available in ES6, ES7 and ES8 −

BabelJS manages the following two parts −

• transpiling
• polyfilling

What is Babel-Transpiler?

Babel-transpiler converts the syntax of modern JavaScript into a form, which can be easily understood by older browsers. For example, arrow function, const, let classes will be converted to function, var, etc. Here the syntax, i.e., the arrow function is converted to a normal function keeping the functionality same in both the cases.

What is Babel-polyfill?

There are new features added in JavaScript like promises, maps and includes. The features can be used on array; the same, when used and transpiled using babel will not get converted. In case the new feature is a method or object, we need to use Babel-polyfill along with transpiling to make it work on older browsers.

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

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 BabelJS

In this section, we will learn about the different features of BabelJS. Following are the most important core features of BabelJS −

Babel-Plugins

Plugins and Presets are config details for Babel to transpile the code. Babel supports a number of plugins, which can be used individually, if we know the environment in which the code will execute.

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. We need to use presets, which has the environment in which we want the code to be converted. For example, es2015 preset will convert the code to es5.

Babel-Polyfills

There are some features like methods and objects, which cannot be transpiled. At such instances, we can make use of babel-polyfill to facilitate the use of features in any browser. Let us consider the example of promises; for the feature to work in older browsers, we need to use polyfills.

Babel-Polyfills

Babel-cli comes with a bunch of commands where the code can be easily compiled on the command line. It also has features like plugins and presets to be used along with the command making it easy to transpile the code at one go.

Advantages of using BabelJS

In this section, we will learn about the different advantages associated with the use of BabelJS −

• BabelJS provides backward compatibility to all the newly added features to JavaScript and can be used in any browsers.

• BabelJS has the ability to transpile to take the next upcoming version of JavaScript - ES6, ES7, ESNext, etc.

• BabelJS can be used along with gulp, webpack, flow, react, typescript, etc. making it very powerful and can be used with big project making developer’s life easy.

• BabelJS also works along with react JSX syntax and can be compiled in JSX form.

• BabelJS has support for plugins, polyfills, babel-cli that makes it easy to work with big projects.

Disadvantages of using BabelJS

In this section, we will learn about the different disadvantages of using BabelJS −

• BabelJS code changes the syntax while transpiling which makes the code difficult to understand when released on production.

• The code transpiled is more in size when compared to the original code.

• Not all ES6/7/8 or the upcoming new features can be transpiled and we have to use polyfill so that it works on older browsers.

Here is the official site of babeljs https://babeljs.io/.