Complete Babel Complete Guide | JavaScript Transpiler

Complete Babel Complete Guide | JavaScript Transpiler

· 5분 읽기 · 수정 Intermediate
Complete Babel Complete Guide | JavaScript Transpiler

이 글의 핵심

Complete guide to transpiling JavaScript with Babel. From Presets, Plugins, Polyfills to Webpack/Vite integration with practical examples. Focus on Babe...

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

{
  "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
{
  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ]
}

@babel/preset-typescript

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

4. Plugins

@babel/plugin-transform-runtime

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

@babel/plugin-proposal-decorators

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

5. Polyfills

core-js

npm install core-js
{
  "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
// 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
// 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

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

{
  "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
  • 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.

Frequently Asked Questions (FAQ)

Q. When would I use this in practice?

A. Complete guide to transpiling JavaScript with Babel.

Q. What should I read before this?

A. Follow the previous article or related articles links at the bottom of each post to learn in sequence.

Q. Where can I study this more deeply?

A. Check cppreference and the relevant library’s official documentation. The reference links at the end of the article are also worth using.

Other articles related to this topic.

Keywords Covered in This Article (Related Search Terms)

This article covers Babel, Transpiler, JavaScript, TypeScript, Polyfill, Build Tools, Frontend.