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