Complete Babel Guide | JavaScript Transpiler, Presets, Plugins & Practical Usage

Key Takeaways

Complete guide to transpiling JavaScript with Babel. Covers Presets, Plugins, Polyfills, and Webpack/Vite integration with practical examples.

Real-World Experience: Running modern JavaScript on legacy browsers with Babel resolved 100% of browser compatibility issues.

Introduction: “We Need to Support Legacy Browsers”

Real-World Problem Scenarios

Scenario 1: Want to use modern JavaScript
Legacy browsers don’t support it. Convert with Babel.

Scenario 2: Need Polyfills
Promise, Array.from, etc. are missing. Babel automatically adds them.

Scenario 3: Want to use JSX
Browsers don’t understand JSX. Convert with Babel.

---

1. What is Babel?

Key Features

Babel is a JavaScript transpiler.

Main Advantages:

• Modern JavaScript: ES2024 → ES5
• JSX: React support
• TypeScript: Type removal
• Polyfills: Automatic addition
• Plugins: Extensible

---

2. Installation and Basic Configuration

Installation

npm install -D @babel/core @babel/cli @babel/preset-env

.babelrc

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

Execution

npx babel src --out-dir dist

---

3. Presets

@babel/preset-env

Here’s an implementation example using JSON. Please review the code to understand the role of each part.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["> 1%", "last 2 versions", "not dead"]
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

@babel/preset-react

npm install -D @babel/preset-react

Here’s an implementation example using JSON. Please review the code to understand the role of each part.

{
  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ]
}

@babel/preset-typescript

npm install -D @babel/preset-typescript

Here’s an implementation example using JSON. Try running the code directly to see how it works.

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ]
}

---

4. Plugins

@babel/plugin-transform-runtime

npm install -D @babel/plugin-transform-runtime
npm install @babel/runtime

Here’s an implementation example using JSON. Please review the code to understand the role of each part.

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3
      }
    ]
  ]
}

@babel/plugin-proposal-decorators

npm install -D @babel/plugin-proposal-decorators

Here’s an implementation example using JSON. Try running the code directly to see how it works.

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "version": "2023-05" }]
  ]
}

---

5. Polyfills

core-js

npm install core-js

Here’s an implementation example using JSON. Please review the code to understand the role of each part.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

Manual Import

import 'core-js/stable';
import 'regenerator-runtime/runtime';

---

6. Webpack Integration

npm install -D babel-loader

Here’s an implementation example using JavaScript. Please review the code to understand the role of each part.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

---

7. Vite Integration

Vite uses esbuild by default, but you can add Babel.

npm install -D @vitejs/plugin-react

Here’s an implementation example using TypeScript. Import necessary modules. Please review the code to understand the role of each part.

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ['@babel/plugin-proposal-decorators'],
      },
    }),
  ],
});

---

8. Practical Example: React Library

babel.config.js

Here’s a detailed implementation using JavaScript. Please review the code to understand the role of each part.

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          browsers: ['> 1%', 'last 2 versions', 'not dead'],
        },
        modules: false,
        useBuiltIns: 'usage',
        corejs: 3,
      },
    ],
    [
      '@babel/preset-react',
      {
        runtime: 'automatic',
      },
    ],
    '@babel/preset-typescript',
  ],
  plugins: [
    [
      '@babel/plugin-transform-runtime',
      {
        corejs: 3,
      },
    ],
  ],
  env: {
    test: {
      presets: [
        [
          '@babel/preset-env',
          {
            targets: {
              node: 'current',
            },
          },
        ],
      ],
    },
  },
};

---

9. Browser Targets

.browserslistrc

> 1%
last 2 versions
not dead

package.json

Here’s an implementation example using JSON. Try running the code directly to see how it works.

{
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

---

Summary and Checklist

Key Summary

• Babel: JavaScript transpiler
• Presets: Configuration bundles
• Plugins: Transformation rules
• Polyfills: Automatic addition
• Webpack/Vite: Integration possible
• Browser Targets: Flexible configuration

Implementation Checklist

• Install Babel
• Configure Presets
• Add Plugins
• Configure Polyfills
• Integrate Webpack/Vite
• Set browser targets
• Production build
• Check bundle size

---

Related Articles

• Complete Webpack Guide
• Complete TypeScript Guide
• Complete Vite Guide

---

Keywords Covered in This Article

Babel, Transpiler, JavaScript, TypeScript, Polyfill, Build Tools, Frontend

Frequently Asked Questions (FAQ)

Q. Should I use it with TypeScript?

A. TypeScript does type checking, Babel does transformation. Using them together is good.

Q. How does it compare to esbuild?

A. esbuild is much faster. Babel provides more transformation options.

Q. Does it increase bundle size?

A. Adding Polyfills can increase it. You can minimize with useBuiltIns: ‘usage’.

Q. Is it safe to use in production?

A. Yes, it’s used in almost all frontend projects.