Соответствие babel-пресетов настройкам SWC
## Соответствие Babel-пресетов настройкам SWC
### Архитектурная разница между Babel и SWC
Babel опирается на поэтапную трансформацию AST с большим количеством плагинов и пресетов, тогда как SWC реализует трансформации через высокопроизводительный компилятор на Rust с фиксированным набором встроенных преобразований в JavaScript-обёртке конфигурации.
Ключевая разница заключается в модели конфигурации:
* Babel использует **presets**, которые представляют собой композиции плагинов
* SWC использует **структурированные опции `jsc` и `env`**, без прямого аналога пресетов
Соответствие строится не 1:1, а через группы функциональности.
---
## @babel/preset-env и SWC: эквивалентность трансформаций окружения
### Основная идея preset-env
`@babel/preset-env` определяет, какие трансформации применять в зависимости от целевых окружений (browserslist, Node версии и т.д.).
### В SWC аналогичная логика реализуется через `jsc.transform` и `env`
Основные соответствия:
#### Target-ориентированная компиляция
Babel:
* `targets: { browsers: [...] }`
SWC:
* `jsc.target`
* `env.targets`
```json
{
"jsc": {
"target": "es2020"
}
}
```
или более гибко:
```json
{
"env": {
"targets": {
"chrome": "90",
"firefox": "88",
"node": "16"
}
}
}
```
**Смысловое соответствие:**
* Babel `preset-env` → SWC `env + jsc.target`
---
#### Использование core-js и polyfills
Babel:
* `useBuiltIns: "usage" | "entry"`
* `corejs: 3`
SWC:
* аналог частично отсутствует на уровне автоматической инъекции polyfill
* используется внешний контроль или интеграция через bundler (Webpack/Rspack/Vite)
Ключевая разница:
* Babel автоматически добавляет `import "core-js"`
* SWC не выполняет автоматическую polyfill-инъекцию в том же виде
В SWC допустимые стратегии:
* управление polyfills на уровне сборщика
* использование `@swc/helpers` только для helper-функций
* ручное подключение core-js при необходимости
---
#### Мод трансформации
Babel preset-env:
* `modules: "auto" | "commonjs" | false`
SWC:
```json
{
"module": {
"type": "commonjs"
}
}
```
или:
```json
{
"module": {
"type": "es6"
}
}
```
---
## JSX и React: @babel/preset-react → SWC React transform
### Основные соответствия
Babel preset-react включает:
* JSX трансформацию
* runtime автоматизацию
* development-режим
* React Refresh
SWC реализует это через:
```json
{
"jsc": {
"transform": {
"react": {
"runtime": "automatic",
"development": false,
"refresh": true
}
}
}
}
```
---
### Сопоставление параметров
#### JSX runtime
Babel:
* `runtime: "automatic" | "classic"`
SWC:
* `jsc.transform.react.runtime`
Эквивалентность:
* automatic → automatic
* classic → classic
---
#### Development mode
Babel:
* development: true включает дополнительные проверки
SWC:
* `development: true` внутри react transform
Поведение:
* добавление dev warnings
* оптимизации отключаются
---
#### React Refresh
Babel:
* через `react-refresh/babel`
SWC:
* встроенная поддержка:
```json
{
"react": {
"refresh": true
}
}
```
---
## TypeScript: @babel/preset-typescript → SWC TypeScript parser
### Основная модель
Babel TypeScript preset:
* удаляет типы
* не выполняет типовую проверку
* поддерживает JSX
SWC реализует это через два слоя:
* парсер
* трансформер
```json
{
"jsc": {
"parser": {
"syntax": "typescript",
"tsx": true
},
"transform": {
"typescript": {
"tsx": true
}
}
}
}
```
---
### Сопоставление поведения
| Возможность | Babel preset-typescript | SWC |
| -------------- | ----------------------- | --- |
| Удаление типов | да | да |
| JSX support | да | да |
| Type checking | нет | нет |
| Emit JS | да | да |
---
### Отличие по архитектуре
Babel использует плагин `@babel/plugin-transform-typescript`.
SWC разделяет:
* parser (понимание TS синтаксиса)
* transform (удаление типов)
---
## Stage-пресеты Babel и их отсутствие в SWC
### Babel stage концепция
Исторические пресеты:
* `@babel/preset-stage-0`
* `stage-1`
* `stage-2`
* `stage-3`
Они включали предложения ECMAScript на разных стадиях TC39.
---
### Подход SWC
SWC не реализует stage-пресеты как единый блок.
Причина:
* отсутствие стабильной привязки к стадиям TC39
* ориентация на конкретные трансформации
---
### Замена stage-функциональности
В SWC используются точечные флаги:
#### Class properties
Babel:
* `@babel/plugin-proposal-class-properties`
SWC:
```json
{
"jsc": {
"transform": {
"legacyDecorator": true,
"decoratorMetadata": true
}
}
}
```
#### Optional chaining / nullish coalescing
Babel:
* `@babel/plugin-proposal-optional-chaining`
* `@babel/plugin-proposal-nullish-coalescing-operator`
SWC:
* поддерживаются нативно без включения
---
## Декораторы: ключевое расхождение Babel vs SWC
### Babel подход
* legacy decorators
* proposal decorators (новый стандарт)
* переключение через `legacy: true/false`
### SWC подход
```json
{
"jsc": {
"transform": {
"legacyDecorator": true
}
}
}
```
или новый стандарт:
```json
{
"jsc": {
"parser": {
"decorators": true
}
}
}
```
---
### Сопоставление
| Сценарий | Babel | SWC |
| ----------------- | ----------------------------------- | ------------------------- |
| Legacy decorators | plugin-proposal-decorators (legacy) | legacyDecorator: true |
| TC39 decorators | stage 3 plugin | parser decorators support |
---
## Runtime helpers: @babel/runtime vs @swc/helpers
### Babel модель
* инъекция helper-функций
* возможность external runtime
```json
{
"plugins": ["@babel/plugin-transform-runtime"]
}
```
---
### SWC модель
```json
{
"jsc": {
"externalHelpers": true
}
}
```
или автоматическое использование `@swc/helpers`
---
### Сопоставление поведения
| Функция | Babel | SWC |
| -------------------- | -------- | ----------- |
| Inline helpers | да | да |
| External runtime | да | ограниченно |
| Tree-shaking helpers | частично | да |
---
## Таблица соответствий ключевых пресетов
### preset-env
* Babel: `@babel/preset-env`
* SWC:
* `env.targets`
* `jsc.target`
* `module.type`
---
### preset-react
* Babel: `@babel/preset-react`
* SWC:
* `jsc.transform.react`
---
### preset-typescript
* Babel: `@babel/preset-typescript`
* SWC:
* `jsc.parser.syntax = "typescript"`
* `jsc.transform.typescript`
---
## Особенности несовпадений архитектуры
### 1. Отсутствие эквивалента Babel plugin ecosystem
Babel:
* тысячи плагинов
* кастомные AST трансформации
SWC:
* ограниченный набор встроенных трансформаций
* расширение через плагины (SWC plugin system) менее универсально
---
### 2. Разная стратегия polyfills
Babel:
* интеграция core-js
* автоматическая вставка импорта
SWC:
* отсутствует встроенный polyfill injection
* ответственность делегируется сборщику
---
### 3. Разделение parser/transform
SWC строго разделяет:
* parsing stage
* transform stage
Babel объединяет это в плагинной модели.
---
## Практическое сопоставление конфигурации
### Babel конфигурация
```json
{
"presets": [
["@babel/preset-env", {
"targets": ">0.25%, not dead",
"useBuiltIns": "usage",
"corejs": 3
}],
["@babel/preset-react", {
"runtime": "automatic"
}],
"@babel/preset-typescript"
]
}
```
---
### Эквивалент SWC
```json
{
"jsc": {
"target": "es2020",
"parser": {
"syntax": "typescript",
"tsx": true
},
"transform": {
"react": {
"runtime": "automatic",
"refresh": true
},
"typescript": {}
}
},
"module": {
"type": "es6"
},
"env": {
"targets": {
"browsers": ">0.25%, not dead"
}
}
}
```
---
## Ключевая модель соответствия
Соотношение Babel → SWC можно формализовать как переход:
* Preset (Babel) → группа конфигурационных блоков (SWC)
* Plugin (Babel) → конкретный `transform` или `parser` флаг
* Polyfill system (Babel) → внешняя инфраструктура
* Runtime helpers (Babel) → `externalHelpers` или `@swc/helpers`
---
## Инженерная логика миграции
При переносе Babel-конфигурации в SWC основная трансформация происходит по принципу:
* удаление preset-слоя
* декомпозиция на:
* target environment
* syntax parsing
* specific transforms
* module system
* runtime helpers
SWC требует более явной декларации поведения, но снижает количество промежуточных абстракций, характерных для Babel presets.