Настройка 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.
Зачем нужно разделение на окружения?
Секция env позволяет переопределять любые настройки для конкретного окружения. Например, в development можно отключить минификацию, а в production добавить плагины удаления console.log.Выбор пресетов: таблица
| Пресет | Назначение | Когда подключать |
|---|---|---|
| @babel/preset-env | Транспиляция современного JS под целевые браузеры | Всегда (обязателен) |
| @babel/preset-react | Трансформация JSX и React-синтаксиса | React-проекты |
| @babel/preset-typescript | Поддержка TypeScript (без проверки типов) | TypeScript-проекты |
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 и окружениям.
- Поддержку кастомных плагинов при необходимости.
- Тестирование сборки на всех целевых браузерах.
| Тип настройки | Время |
|---|---|
| Базовая (React/TypeScript) | 1–2 часа |
| С декораторами и полифилами | 4–8 часов |
Стоимость рассчитывается индивидуально — зависит от сложности проекта и количества окружений. Свяжитесь с нами для бесплатного аудита текущей сборки, и мы подберём оптимальную конфигурацию.
Ускорение сборки и анализ
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 под ваш проект — и мы подберём оптимальную конфигурацию.