Настройка Babel для транспиляции JavaScript: пресеты и плагины

Настройка 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. Для legacy 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 под ваш проект — и мы подберём оптимальную конфигурацию.