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

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

Babel превращает современный JavaScript в код, который понимают старые браузеры. Дополнительно он обрабатывает JSX, TypeScript (без проверки типов), экспериментальные предложения TC39 и декораторы. В 2025 году Babel всё чаще заменяется на SWC в части транспиляции, но он остаётся незаменимым для сложных AST-трансформаций и кастомных плагинов.

Установка

# Ядро и CLI
npm install --save-dev @babel/core @babel/cli

# Preset для современного JS
npm install --save-dev @babel/preset-env

# Для React
npm install --save-dev @babel/preset-react

# Для TypeScript
npm install --save-dev @babel/preset-typescript

# Runtime для async/await без полифилов в каждом файле
npm install --save-dev @babel/plugin-transform-runtime
npm install @babel/runtime

babel.config.json

{
  "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 в preset-env важно для сборщиков — это позволяет сборщику (Webpack, Rollup) самому обрабатывать ESM-импорты и делать tree-shaking. В тестовой среде (Jest) нужен "modules": "commonjs", потому что Node.js исторически использует CJS.

Targets и browserslist

Вместо явного указания в конфиге Babel лучше использовать .browserslistrc или секцию browserslist в package.json — этот файл читается и Babel, и Autoprefixer, и другими инструментами:

# .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

{
  "presets": [
    ["@babel/preset-env", { "useBuiltIns": "usage", "corejs": "3.38" }]
  ]
}

Декораторы

Декораторы 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/plugin-proposal-decorators", { "version": "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": {
    "production": {
      "plugins": ["./babel-plugin-remove-console.js"]
    }
  }
}

Интеграция с Webpack

npm install --save-dev babel-loader

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,    // кешировать в node_modules/.cache/babel-loader
            cacheCompression: false, // без gzip — быстрее на SSD
          },
        },
      },
    ],
  },
};

Интеграция с Jest

npm install --save-dev babel-jest

Jest подхватывает babel-конфиг автоматически, если в проекте есть babel.config.json. Отдельная настройка нужна только если конфиг специфический:

// jest.config.js
module.exports = {
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { configFile: './babel.config.test.json' }],
  },
};

Анализ что транспилируется

# Посмотреть output для конкретного файла
npx babel src/index.ts --out-file /dev/stdout --presets @babel/preset-typescript,@babel/preset-env

Для понимания что именно добавляет preset-env:

# @babel/compat-data показывает поддержку фич по браузерам
node -e "console.log(require('@babel/compat-data/data/plugins')['transform-arrow-functions'])"

Сроки

Базовая настройка Babel для React/TypeScript проекта: 1–2 часа. Настройка с декораторами, кастомными плагинами, полифилами core-js и интеграцией в CI: 4–8 часов.