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"
|
||||||
|
}
|
||||||
|
```
|
||||||
12
babel.config.json
Normal file
12
babel.config.json
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"presets": [
|
||||||
|
"@babel/preset-env",
|
||||||
|
"@babel/preset-typescript",
|
||||||
|
[
|
||||||
|
"@babel/preset-react",
|
||||||
|
{
|
||||||
|
"runtime": "automatic"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user