Transpiler
It is a type of compiler that takes code written in one programming language and converts it to another language that has a similar level of abstraction. An example of this is TypeScript, which transpiles TypeScript code to JavaScript.
Babel is a transpiler, check the online repl Babel repl
Babel transforms our code into understandable code for browsers, especially the old versions
for example, it transforms this code
let total = 10;
let sum = total ?? 100;
to
"use strict";
let total = 10;
let sum = total !== null && total !== void 0 ? total : 100;
So it means it transforms the new feature ??
Nullish operator to an understandable code for the browsers that don't know what is Nullish operator.
That is known as a transpiler
caveat: not every modern javascript feature can be transpiled. but these cases developers use another tool name polyfill
, like promises and fetch
Polyfill
polyfill in general means we are going to write code which should work in the older browsers
for instance, look this example we want to use function Number.isNaN
in our code, and we write this piece of code before use it.
// These method is a sample of making polyfill
if (!Number.isNaN) {
Number.isNaN = function isNaN(x) {
return x!==x;
};
}
If you check Number.isNaN
in the website CanIUse, you will see the IE browser doesn't support it, but it works in new browsers. So with that piece of code we first check if it works on the browser or not, if it's not available, then we are writing an equivalent piece of code, so the code will not break on older browsers.
You know there are lots of features and function like this if we want to write a polyfill for them.
Shall we write for all of them? Obviously, it's not possible.
So there are some famous libraries to manage it.
for instance, core-js
is a polyfill library that supports almost all new features for all older browsers
you just need to install and import it, then write the code without worrying about the browser support
import 'core-js/actual/array/from'; // <- at the top of
import 'core-js/actual/set';
Array.from(new Set([1, 2, 3, 2, 1]));
Let's have your reasons as well
Top comments (0)