feat: конфигурация Babel с поддержкой React 19 и automatic JSX runtime
- Настроены пресеты: env, typescript, react - Добавлена документация на русском языке (babel.config.README.md) - Automatic JSX runtime - не требуется импорт React
This commit is contained in:
137
babel.config.README.md
Normal file
137
babel.config.README.md
Normal file
@@ -0,0 +1,137 @@
|
||||
# Документация 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"
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user