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