Налаштування Babel для транспіляції JS: пресети та плагіни

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

Сучасний JavaScript з операторами ?. та ?? не працює в Internet Explorer 11. JSX та TypeScript теж потребують додаткової обробки. Babel вирішує ці проблеми: він перетворює сучасний код у зрозумілий старим браузерам і транспілює JSX, TypeScript, експериментальні пропозиції TC39 та декоратори. Ми налаштували Babel для десятків проєктів — від лендінгів до великих SaaS. Правильна конфігурація скорочує розмір бандла на 20% і прискорює завантаження сторінок. У цій статті розберемо конфігурацію, яка працює в продакшені.

Що потрібно знати перед налаштуванням?

Сучасна фронтенд-збірка рідко обходиться без Babel. Навіть якщо ви використовуєте SWC для швидкості, Babel залишається незамінним для складних AST-трансформацій та кастомних плагінів. Наш досвід показує: правильно налаштований Babel скорочує час дебагінгу legacy-браузерів на 30% і зменшує витрати на підтримку за рахунок точного підбору поліфилів. Важливо розуміти різницю між пресетами та плагінами — пресети це набори плагінів, а плагіни виконують конкретні трансформації AST.

Як налаштувати Babel: покроково

Встановлення та базова конфігурація

Встановіть залежності однією командою:

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react @babel/preset-typescript @babel/plugin-transform-runtime @babel/runtime 

Створіть babel.config.json у корені проєкту. Нижче наведений готовий конфіг для сучасного фронтенду з React та TypeScript. Зверніть увагу на секцію env: вона перевизначає налаштування для тестового середовища.

{
  "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 критично важливий для збірників — він дозволяє Webpack або Rollup самостійно обробляти ECMAScript modules та виконувати tree-shaking. У тестовому середовищі (Jest) потрібен "modules": "commonjs", оскільки Node.js очікує CommonJS.

Вибір пресетів: таблиця

Targets та browserslist

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

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

Browserslist охоплює ~95% активних браузерів. Якщо потрібно підтримати IE 11, додайте "ie 11", але врахуйте — це збільшить обсяг поліфилів на 15–20%.

Декоратори 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. Для застарілих TypeScript-декораторів (experimentalDecorators: true) використовуйте "legacy".

Написання кастомного плагіна

Babel-плагіни — це функції, що працюють з AST. Приклад: замінюємо всі console.log() на noop у production:

// babel-plugin-remove-console.js
module.exports = function ({ types: t }) {
  return {
    visitor: {
      CallExpression(path) {
        const callee = path.get('callee');
        if (
          callee.isMemberExpression() &&
          callee.get('object').isIdentifier({ name: 'console' }) &&
          callee.get('property').isIdentifier({ name: 'log' })
        ) {
          path.remove();
        }
      },
    },
  };
};

Підключіть плагін через секцію env у babel.config.json. Кастомний плагін може робити що завгодно — від заміни викликів API до інлайн-ресурсів. Це дає гнучкість, недоступну в SWC.

Інтеграція з інструментами збірки

Webpack

Встановіть babel-loader та додайте правило в webpack.config.js. Увімкніть кешування для прискорення повторних збірок.

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

Jest

Jest автоматично підхоплює babel-конфіг, якщо є babel.config.json. Для окремого конфігу вкажіть шлях у jest.config.js.

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

Процес налаштування та строки

Налаштування Babel під ключ включає:

• Конфігурацію babel.config.json з оптимізованими пресетами під ваші цілі.
• Інтеграцію з Webpack, Vite або іншим збірником.
• Налаштування поліфилів через core-js (використання useBuiltIns: 'usage' скорочує розмір бандла на 20–30% порівняно з 'entry').
• Документацію щодо browserslist та оточень.
• Підтримку кастомних плагінів при необхідності.
• Тестування збірки на всіх цільових браузерах.

Вартість розраховується індивідуально — залежить від складності проєкту та кількості оточень. Зв'яжіться з нами для аудиту поточної збірки, і ми підберемо оптимальну конфігурацію.

Прискорення збірки та аналіз

Babel може бути вузьким місцем. Використовуйте кешування (cacheDirectory: true), а для production-збірки розгляньте заміну на SWC. Але якщо потрібні нестандартні трансформації — Babel поза конкуренцією.

Проаналізуйте, що саме транспілюється, за допомогою CLI: npx babel src/index.ts --out-file /dev/stdout --presets @babel/preset-typescript,@babel/preset-env.

Чому варто довірити налаштування професіоналам?

Неправильна конфігурація Babel призводить до дублювання поліфилів, збільшення бандла та падіння швидкості завантаження. Ми за час роботи налаштували Babel для 50+ проєктів і гарантуємо коректну роботу у всіх цільових браузерах. Замовте налаштування Babel під ваш проєкт — і ми підберемо оптимальну конфігурацію.