Налаштування Babel для транспіляції JavaScript

Налаштування Babel для транспіляції JavaScript

Babel перетворює сучасний JavaScript в код, який розуміють старі браузери. Дополнительно він обробляє JSX, TypeScript (без перевірки типів), експериментальні пропозиції TC39 та декоратори. У 2025 році Babel все частіше замінюється на SWC у частині транспіляції, але він залишається незамінним для складних AST-трансформацій та кастомних плагінів.

Встановлення

# Ядро та CLI
npm install --save-dev @babel/core @babel/cli

# Preset для сучасного JS
npm install --save-dev @babel/preset-env

# Для React
npm install --save-dev @babel/preset-react

# Для TypeScript
npm install --save-dev @babel/preset-typescript

# Runtime для async/await без полішилів у кожному файлі
npm install --save-dev @babel/plugin-transform-runtime
npm install @babel/runtime

babel.config.json

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "> 0.5%, last 2 versions, not dead, not ie 11",
        "useBuiltIns": "usage",
        "corejs": "3.38",
        "modules": false
      }
    ],
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ],
    [
      "@babel/preset-typescript",
      {
        "allExtensions": true,
        "isTSX": true
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": false,
        "helpers": true,
        "regenerator": true
      }
    ]
  ],
  "env": {
    "test": {
      "presets": [
        ["@babel/preset-env", { "targets": { "node": "current" }, "modules": "commonjs" }]
      ]
    }
  }
}

"modules": false у preset-env важливо для бандлерів — дозволяє бандлеру (Webpack, Rollup) самому обробляти ESM-імпорти та робити tree-shaking. У тестовій середині (Jest) потрібен "modules": "commonjs", тому що Node.js історично використовує CJS.

Targets та browserslist

Замість явного указання в конфігу Babel краще використовувати .browserslistrc або секцію browserslist в package.json — цей файл читається й Babel, й Autoprefixer, й іншими інструментами:

# .browserslistrc
[production]
> 0.5%
last 2 versions
not dead
not ie 11

[development]
last 1 chrome version
last 1 firefox version
last 1 safari version

Декоратори

TypeScript-декоратори (метадані, Angular, MobX, TypeORM) потребують спеціального плагіну:

npm install --save-dev @babel/plugin-proposal-decorators

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

Версія "2023-11" — це фіналізований стандарт TC39 Stage 3. Для проектів з legacy TypeScript-декораторами (experimentalDecorators: true) використовуйте "legacy":

["@babel/plugin-proposal-decorators", { "version": "legacy" }]

Інтеграція з Webpack

npm install --save-dev babel-loader

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,    // кешувати в node_modules/.cache/babel-loader
            cacheCompression: false, // без gzip — швидше на SSD
          },
        },
      },
    ],
  },
};

Інтеграція з Jest

npm install --save-dev babel-jest

Jest підхоплює babel-конфіг автоматично, якщо в проекті є babel.config.json. Окремена настройка потрібна тільки якщо конфіг специфічний:

// jest.config.js
module.exports = {
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { configFile: './babel.config.test.json' }],
  },
};

Терміни

Базова настройка Babel для React/TypeScript проекту: 1–2 години. Настройка з декораторами, кастомними плагінами, core-js полішилами та інтеграцією в CI: 4–8 годин.