Understanding Babel: History, Usage, and Custom Plugin Development

Babel is currently the most widely used JavaScript compiler that converts modern ES2015+ code into ES5, allowing developers to write the latest syntax without worrying about browser compatibility.

Introduction

Babel enables developers to write code in the newest JavaScript versions and have it run correctly across all browsers.

// before Babel transformation
input.map(item => item + 1);

// after Babel transformation
input.map(function(item) {
  return item + 1;
});

Beyond this basic transformation, Babel offers many more capabilities.

From Babel's Birth

In September 2014, ES6 features were finalized but no browser fully supported them. The tool then known as 6to5 (later renamed Babel) appeared, quickly gaining popularity and becoming a cornerstone of front‑end development.

Babel now maintains core packages such as @babel/core and @babel/generator , along with numerous plugins and presets, and has amassed over 30k stars on GitHub.

How to Use Babel

Step 1: Install Babel core packages

npm install --save-dev @babel/core @babel/cli

Step 2: Create a configuration file

const presets = [];
const plugins = [];
module.exports = {
  presets,
  plugins
};

Place this babel.config.js (or .babelrc ) in the project root.

Step 3: Configure plugins or presets

npm install --save-dev @babel/plugin-transform-arrow-functions @babel/plugin-transform-block-scoping

// add the plugins to the config
const presets = [];
const plugins = ['@babel/plugin-transform-arrow-functions', '@babel/plugin-transform-block-scoping']; // new plugins
module.exports = { presets, plugins };

Running ./node_modules/.bin/babel test.js -o new.js now transforms arrow functions and let declarations into ES5 equivalents:

var log = function() {
  alert('just log');
}

In real projects, Babel is often used via babel-loader in Webpack, and the preset‑env preset can automatically select the necessary plugins based on target browsers.

What Happens to an Arrow Function (=>) in Babel

Babel processes code in three steps:

Parse: @babel/parser converts source code into an AST (Abstract Syntax Tree) following the ESTree spec.

Transform: Plugins traverse and modify the AST using @babel/traverse . For example, @babel/plugin-transform-arrow-functions replaces ArrowFunctionExpression nodes with regular function expressions.

Generate: @babel/generator turns the transformed AST back into JavaScript code, optionally minifying or adding source maps.

Custom Babel Plugin Development

Babel encourages developers to write their own plugins or presets. Two key concepts are:

Visitor: An object that defines methods for specific AST node types. When the traversal encounters a matching node, the corresponding method is invoked.

Path: The argument passed to a visitor method, providing access to the node, its parent, and utilities for modification.

Example visitor that reverses identifier names:

const MyVisitor = {
  Identifier(path) {
    path.node.name = path.node.name.split('').reverse().join(''); // reverse identifier
  }
};

Full plugin implementation (index.js):

module.exports = function() {
  return {
    visitor: {
      Identifier(path) {
        path.node.name = path.node.name.split('').reverse().join('');
      }
    }
  };
};

After publishing the plugin to npm and adding it to a project's plugins array, Babel will transform identifiers accordingly, e.g., turning log into gol in the output.