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