JavaScript Polyfilling & Transpiling Guide for Beginners

JavaScript moves fast, and new features come. Some browsers do not support these features and cause issues for users.

Developers solve this with two tools, which are polyfills and transpilers. Both make old browsers handle new code so the site works everywhere.

Understand the Polyfilling in JavaScript

A polyfill is code that adds a feature when a browser does not support it. The browser acts as if it already has that feature inside.

Some browsers do not support Array.includes. A polyfill adds it and code that depends on it can run.

Users often keep old browsers for many years. A website must still work for them and not break. Polyfills give support to these browsers and keep the site usable for everyone.

What is Transpiling in JavaScript?

A transpiler takes new code and rewrites it into old syntax that old browsers can read. It does not add features but it changes the way code looks so the browser accepts it.

For example:

const sum = (a, b) => a + b;

Transpiled code:

var sum = function(a, b) { return a + b; };

A transpiler scans the source code and creates a new version with old syntax. The browser only sees the rewritten version and runs it without errors.

First, install Node.js and npm. Then create a project folder and set it up. After that, install Babel with npm. Add a config file for Babel in the folder. Last step is to run Babel so your code becomes older syntax.

The Difference Between Polyfilling and Transpiling

A polyfill gives a missing feature to a browser. A transpiler rewrites code into a form that works on old browsers.

Here is a table that shows you the key differences:

Here are some examples:

• Fetch API Polyfill – Some browsers do not have fetch. A polyfill adds fetch and falls back to XMLHttpRequest.
• Promise Polyfill – Old browsers lack Promise. A polyfill creates it so async code still runs.
• Array.from Polyfill – Some browsers do not know Array.from. A polyfill adds it so array-like objects work as arrays.

You can install Babel and Core-JS with npm. Then add a Babel config that connects to Core-JS. After setup, you can run a build tool. The code now uses transpiling from Babel and polyfills from Core-JS at the same time.

Wrapping Up

You learned what a polyfill does and how a transpiler works. Also, understood how to use Babel with Core-JS in one project.

Here is a quick recap:

• A polyfill helps you add features that do not exist
• A transpiler rewrites new code into old syntax, and both make your site work on every browser.

FAQs

// ES6 arrow function
const add = (a, b) => a + b;

// After transpiling
function add(a, b) {
  return a + b;
}

if (!Array.prototype.includes) {
  Array.prototype.includes = function(search) {
    return this.indexOf(search) !== -1;
  };
}

// Install Babel
npm install --save-dev @babel/core @babel/cli @babel/preset-env

// babel.config.json
{
  "presets": ["@babel/preset-env"]
}

// Command to transpile
npx babel src --out-dir dist

Similar Reads