Trusted answers to developer questions

What is Babel Transpiler?

Get the Learn to Code Starter Pack

Break into tech with the logic & computer science skills you’d learn in a bootcamp or university — at a fraction of the cost. Educative's hand-on curriculum is perfect for new learners hoping to launch a career.

Babel is a tool that converts newer versions of ECMAScript to ECMAScript5 (ES5). ES5 is the current standard Javascript that is understood by major browsers including IE11. Babel enables developers to use cutting-edge Javascript without worrying about browser support.

Babel is a JavaScript transpiler, meaning it converts a newer version of ECMAScript, such as ES9, to a standard version (ES5).

How does Babel Work?

Babel is a combination of plugins. The most common plugins used are:

Plugin Description
@babel/core Contains the core logic for the transpiled code.
@babel/cli Provides the CLI tool for working with Babel.
@bable/env A preset for transpiling ES6+ to ES5.

Babel can be used with the CLI to transform code or with a build tool/module bundler like Webpack.

Using Babel to Convert ES11 to ES5

We start with the following ES11 (ES2020) snippet with Nullish Coalescing. The Nullish Coalescing operator (??) allows us to assign a default value to a variable, like name, if some other variable (wizard) is null.

const wizard = null
const name = wizard ?? "Harry"

The terminal below contains the set up script to install @babel/core, @babel/env, and @babel/cli. After starting the terminal, transpile the code above in the following way:

./node_modules/.bin/babel src --out-dir dist --presets=@babel/env

Then, view the output as shown below:

more dist/index.js
Terminal 1
Terminal
Loading...

Running the commands above should return this output. Babel outputs ES5 code which browsers like IE11 can run.

"use strict";
var _wizard;
var name = (_wizard = wizard) !== null && _wizard !== void 0 ? _wizard :
"Harry";

Extra Credit: Polyfilling

Did you know that transpilation is not same as polyfiling? To understand polyfiling, you must know the difference between ECMAScript syntax additions and core ECMAScript modifications. The nullish operator (??) allows one to do a null check which can be defined using the equality operator (!==) and the tenery operator (?). Hence, it doesn’t offer any modifications to the language; it just provides a syntactic sugar.

On the other hand, String.trimStart(), which is an ES10 addition, is a direct modification of the String prototype. Its use is shown below:

let greeting = "    Hello everyone";

console.log(greeting.trimStart()); // "Hello everyone"

Babel cannot help us in this situation because it only transpiles code. However, a polyfill library like core-js provides code that adds the trimStart method to the string prototype. The snippet below is an example of a polyfill that core-js provides:

//https://github.com/FabioVergani/js-Polyfill_String-trimStart

(function (w) {
  var String = w.String,
    Proto = String.prototype;

  (function (o, p) {
    if (p in o ? (o[p] ? false : true) : true) {
      var r = /^\s+/;
      o[p] =
        o.trimLeft ||
        function () {
          return this.replace(r, "");
        };
    }
  })(Proto, "trimStart");
})(window);

Core-JS is usually used with Babel to polyfill core changes to ECMAScript. Babel versions < 7.4.0 include a @babel/polyfill package that uses core-js/stable and regenerator-runtime/runtime under the hood. The @babel/polyfill package has been deprecated in Babel versions >= 7.4.0.

Core-js must be explicitly defined in the options object.

const presets = [
[
"@babel/env",
{
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1",
},
useBuiltIns: "usage",
corejs: "3.6.4",
},
],
];
module.exports = { presets };

RELATED TAGS

javascript

CONTRIBUTOR

Osinachi Chukwujama
Did you find this helpful?