Previous
Next
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

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

자주 묻는 질문 (FAQ)

Q. 이 내용을 실무에서 언제 쓰나요?

A. Complete guide to transpiling JavaScript with Babel. From Presets, Plugins, Polyfills to Webpack/Vite integration with p… 실무에서는 위 본문의 예제와 선택 가이드를 참고해 적용하면 됩니다.

Q. 선행으로 읽으면 좋은 글은?

A. 각 글 하단의 이전 글 또는 관련 글 링크를 따라가면 순서대로 배울 수 있습니다. C++ 시리즈 목차에서 전체 흐름을 확인할 수 있습니다.

Q. 더 깊이 공부하려면?

A. cppreference와 해당 라이브러리 공식 문서를 참고하세요. 글 말미의 참고 자료 링크도 활용하면 좋습니다.

같이 보면 좋은 글 (내부 링크)

이 주제와 연결되는 다른 글입니다.

이 글에서 다루는 키워드 (관련 검색어)

Babel, Transpiler, JavaScript, TypeScript, Polyfill, Build Tools, Frontend 등으로 검색하시면 이 글이 도움이 됩니다.