b7575ea756
- Настроены пресеты: env, typescript, react - Добавлена документация на русском языке (babel.config.README.md) - Automatic JSX runtime - не требуется импорт React
138 lines
3.7 KiB
Markdown
138 lines
3.7 KiB
Markdown
# Документация babel.config.json
|
||
|
||
## Описание
|
||
|
||
Конфигурация Babel для транспиляции современного JavaScript/TypeScript кода в версию, совместимую со старыми браузерами.
|
||
|
||
## Используемые пресеты
|
||
|
||
### @babel/preset-env
|
||
Автоматически определяет необходимые трансформации и полифиллы на основе целевых браузеров.
|
||
|
||
**Возможности:**
|
||
- Преобразование современного JavaScript (ES6+) в ES5
|
||
- Автоматический подбор необходимых полифиллов
|
||
- Оптимизация размера бандла
|
||
|
||
### @babel/preset-typescript
|
||
Удаляет типы TypeScript из кода, оставляя чистый JavaScript.
|
||
|
||
**Важно:** Babel не проверяет типы! Для проверки типов используется отдельная команда `pnpm type-check`.
|
||
|
||
### @babel/preset-react
|
||
Преобразует JSX синтаксис в вызовы функций React.
|
||
|
||
**Настройки:**
|
||
```json
|
||
{
|
||
"runtime": "automatic"
|
||
}
|
||
```
|
||
|
||
**Автоматический runtime (React 19):**
|
||
- Не требует импорта React в каждом файле
|
||
- Использует новый JSX transform
|
||
- Уменьшает размер бандла
|
||
|
||
## Примеры трансформации
|
||
|
||
### JSX Transform
|
||
|
||
**До (исходный код):**
|
||
```jsx
|
||
const App = () => {
|
||
return <div>Hello World</div>
|
||
}
|
||
```
|
||
|
||
**После (с automatic runtime):**
|
||
```javascript
|
||
import { jsx as _jsx } from 'react/jsx-runtime'
|
||
|
||
const App = () => {
|
||
return _jsx('div', { children: 'Hello World' })
|
||
}
|
||
```
|
||
|
||
### TypeScript
|
||
|
||
**До:**
|
||
```typescript
|
||
const sum = (a: number, b: number): number => {
|
||
return a + b
|
||
}
|
||
```
|
||
|
||
**После:**
|
||
```javascript
|
||
const sum = (a, b) => {
|
||
return a + b
|
||
}
|
||
```
|
||
|
||
### Modern JavaScript
|
||
|
||
**До (ES6+):**
|
||
```javascript
|
||
const numbers = [1, 2, 3]
|
||
const doubled = numbers.map(n => n * 2)
|
||
const [first, ...rest] = numbers
|
||
```
|
||
|
||
**После (ES5):**
|
||
```javascript
|
||
var numbers = [1, 2, 3]
|
||
var doubled = numbers.map(function(n) { return n * 2 })
|
||
var first = numbers[0]
|
||
var rest = numbers.slice(1)
|
||
```
|
||
|
||
## Интеграция с webpack
|
||
|
||
Babel используется через `babel-loader` в webpack конфигурации:
|
||
|
||
```typescript
|
||
// config/build/loaders/buildBabelLoader.ts
|
||
{
|
||
test: /\.(js|jsx|tsx)$/,
|
||
exclude: /node_modules/,
|
||
use: {
|
||
loader: 'babel-loader',
|
||
options: {
|
||
presets: ['@babel/preset-env'],
|
||
plugins: [
|
||
isDev && require.resolve('react-refresh/babel')
|
||
].filter(Boolean)
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
## React Refresh (только в dev режиме)
|
||
|
||
В режиме разработки добавляется плагин `react-refresh/babel` для горячей перезагрузки React компонентов без потери состояния.
|
||
|
||
**Преимущества:**
|
||
- Мгновенное обновление компонентов при изменении кода
|
||
- Сохранение состояния компонентов
|
||
- Сохранение позиции скролла
|
||
- Улучшенный DX (Developer Experience)
|
||
|
||
## Связанные файлы
|
||
- `webpack.config.ts` - использует babel-loader
|
||
- `config/build/loaders/buildBabelLoader.ts` - конфигурация loader
|
||
- `tsconfig.json` - конфигурация TypeScript
|
||
- `package.json` - зависимости Babel
|
||
|
||
## Зависимости
|
||
|
||
```json
|
||
{
|
||
"@babel/core": "^7.26.0",
|
||
"@babel/preset-env": "^7.26.0",
|
||
"@babel/preset-react": "^7.26.0",
|
||
"@babel/preset-typescript": "^7.26.0",
|
||
"babel-loader": "^9.2.0"
|
||
}
|
||
```
|