CARVIEW |
What is Babel Transpiler?
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 = 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";
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 };
Relevant Answers
Explore Courses
Free Resources