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).
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.
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 = nullconst 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
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";
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 };