Babel from Beginner to Expert: A Learning Path

Babel from Beginner to Expert: A Learning Path

What Is Babel?

Babel is a JavaScript compiler, often described as a transpiler. It takes modern JavaScript (ES2015+, ES modules, JSX, TypeScript) and transforms it into a backward-compatible version that can run in older browsers and environments. Think of it as a time machine for your code: you write the latest syntax, and Babel rewrites it so that even Internet Explorer 11 can understand it.

Under the hood, Babel parses your code into an Abstract Syntax Tree (AST), applies a series of transformations (plugins), and then generates the output code. This plugin-based architecture is what makes Babel incredibly flexible – you can enable only the transformations you need.

Why Babel Matters

JavaScript evolves quickly. New proposals move through TC39 stages, and browser support is fragmented. Babel allows developers to use cutting-edge features (optional chaining, nullish coalescing, async/await, etc.) without waiting for all browsers to catch up. It also enables ecosystem tools like JSX (React), Flow, and TypeScript annotations.

Without Babel, you would either restrict yourself to widely supported ES5 syntax or rely on users having the latest browsers. For production web applications, Babel is almost mandatory to ensure consistent behavior across a diverse user base. Additionally, Babel can inject polyfills for missing APIs (like Promise or Array.from) via core-js and regenerator-runtime.

How to Use Babel – Step by Step

Setting Up a Basic Project

Start with an empty directory and initialize a Node.js project:

mkdir babel-demo
cd babel-demo
npm init -y

Install the core Babel packages and a popular preset:

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

• @babel/core – the core compiler
• @babel/cli – command-line interface for running Babel
• @babel/preset-env – a smart preset that automatically determines which transformations and polyfills are needed based on your target environments

Configuring Babel

Create a configuration file named babel.config.json in the root of your project:

{
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 0.25%, not dead"
    }]
  ]
}

Alternatively, you can use a .babelrc file (JSON or JS). The targets option uses browserslist syntax – here we target browsers with more than 0.25% global usage and exclude dead browsers. This is a good starting point.

Running Babel via CLI

Place some modern JavaScript in a src folder. For example, src/index.js:

const greet = (name) => `Hello, ${name}!`;
const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2);
console.log(greet('World'), doubled);

Now compile it:

npx babel src --out-dir dist

Check dist/index.js. Babel will have transpiled arrow functions, template literals, and const into ES5-compatible code (depending on your targets).

Integrating with Webpack

For most real projects, you’ll use a bundler. Here’s a minimal Webpack setup with Babel:

npm install --save-dev webpack webpack-cli babel-loader

Create webpack.config.js:

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

Now run npx webpack and your bundle.js will contain transpiled code.

Using Babel with React (JSX)

To compile JSX, add the React preset:

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

Update your Babel config:

{
  "presets": [
    ["@babel/preset-env", { "targets": "> 0.25%, not dead" }],
    ["@babel/preset-react", { "runtime": "automatic" }]
  ]
}

The runtime: "automatic" option enables the new JSX transform (no need to import React in every file). Now you can write JSX like:

function App() {
  return <h1>Hello from Babel!</h1>;
}

Babel will convert it into React.createElement calls (or jsx functions with the automatic runtime).

Polyfilling with core-js and regenerator

Transpiling syntax is only half the story. For new APIs like Promise.allSettled or Array.prototype.flat, you need polyfills. Configure @babel/preset-env to include them:

npm install core-js@3 regenerator-runtime

Then update your Babel config:

{
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 0.25%, not dead",
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ]
}

            
🚀 Need a reliable AI agent for your project?
            
Deploy Hermes Agent in 10 minutes. Managed hosting, zero DevOps.
            Get Started — $23.99/mo
        
← Back to all articles