Babel JavaScript (Node.js): methods, examples…

What is Babel and why is it needed?

Babel is a powerful transpiler (compiler) for JavaScript that allows developers to write code in the latest versions of ECMAScript (ES6, ES7, ES8, ES9, ES10, ES11, ES12 and higher) and convert it into backward-compatible JavaScript that can run in older browsers and runtime environments (for example, Node.js versions below 12).

The main problem that Babel solves is the gap between new language features (arrow functions, async/await, destructuring, classes, modules, optional chaining, etc.) and the support for these features in real runtime environments. Babel acts as a bridge, allowing developers to use all the advantages of modern JavaScript without having to wait for all browsers to update.

Babel consists of three main components:

Core (@babel/core) — the main engine that parses code, transforms it, and generates new code.
Plugins — individual modules, each responsible for transforming one specific syntax construct (for example, a plugin for arrow functions, for async/await).
Presets — pre-configured sets of plugins (for example, @babel/preset-env, @babel/preset-react).

Babel is also used for transpiling TypeScript, JSX (React), Flow, and other JavaScript extensions.

Installing Babel

Babel is installed via npm (Node Package Manager). To get started, you will need Node.js version 12 or higher.

Create a new project and initialize it:

mkdir my-babel-projectcd my-babel-projectnpm init -y

Install the main Babel packages:

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

Let's break down what we installed:

@babel/core — the Babel core. Nothing will work without it.
@babel/cli — the command line interface, allowing you to run Babel from the terminal.
@babel/preset-env — the most important preset, which automatically determines which plugins are needed based on the target runtime environments (browsers or Node.js versions).

For working with React, additionally install:

npm install --save-dev @babel/preset-react

For TypeScript:

npm install --save-dev @babel/preset-typescript

Quick start with a code example

Create a Babel configuration file (babel.config.json or .babelrc) in the project root:

{  "presets": [    ["@babel/preset-env", {      "targets": {        "node": "current"      }    }]  ]}

Create a file src/index.js with modern code:

// src/index.jsconst greet = (name) => {  return `Hello, ${name}!`;};

const users = ['Alice', 'Bob', 'Charlie'];const greetings = users.map(user => greet(user));

console.log(greetings);

// Using async/awaitconst fetchData = async () => {  const data = await Promise.resolve({ message: 'Success' });  console.log(data.message);};

fetchData();

Now compile the code using Babel:

npx babel src --out-dir dist

After executing the command, a file index.js with the transformed code will appear in the dist folder:

// dist/index.js"use strict";

var greet = function greet(name) {  return "Hello, ".concat(name, "!");};

var users = ['Alice', 'Bob', 'Charlie'];var greetings = users.map(function (user) {  return greet(user);});

console.log(greetings);

var fetchData = async function fetchData() {  var data = await Promise.resolve({ message: 'Success' });  console.log(data.message);};

fetchData();

Note