S.Gromov
2c88cc3eca
- добавлены frontend инструкции AGENTS и локальный style guide - актуализированы SLM templates под Vite React и слой infra - добавлены шаблоны component, infra и factory-based business - нормализованы примеры документации под alias infra
78 lines
2.7 KiB
Markdown
78 lines
2.7 KiB
Markdown
---
|
||
title: Алиасы импортов
|
||
description: Какие алиасы импортов есть в проекте и как ими пользоваться.
|
||
keywords: [алиасы, aliases, paths, tsconfig, импорты, baseUrl, app, layouts, screens, widgets, business, infra, ui, shared]
|
||
---
|
||
|
||
# Алиасы импортов
|
||
|
||
Какие алиасы импортов есть в проекте и как ими пользоваться.
|
||
|
||
## Конфиг
|
||
|
||
`tsconfig.json` в корне проекта:
|
||
|
||
```json
|
||
{
|
||
"compilerOptions": {
|
||
"paths": {
|
||
"app/*": ["./src/app/*"],
|
||
"layouts/*": ["./src/layouts/*"],
|
||
"screens/*": ["./src/screens/*"],
|
||
"widgets/*": ["./src/widgets/*"],
|
||
"business/*": ["./src/business/*"],
|
||
"infra/*": ["./src/infra/*"],
|
||
"ui/*": ["./src/ui/*"],
|
||
"shared/*": ["./src/shared/*"]
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
Восемь алиасов — ровно по числу слоёв. Других алиасов в проекте нет.
|
||
|
||
## Правила
|
||
|
||
- **Каждый импорт между модулями — через алиас слоя.** Относительные пути (`../../`) запрещены за пределами своего модуля.
|
||
- **Внутри одного модуля** допустимы относительные импорты (`./model`, `./ui/button`) — это часть инкапсуляции модуля.
|
||
- **Префикс `@/` не используется.** Имя слоя — само по себе адрес.
|
||
- **Направление импортов** определяется архитектурой, не алиасами. Алиас разрешает импорт технически, но не отменяет правила слоёв (→ [Слои](../basics/architecture/layers.md)).
|
||
|
||
**Хорошо**
|
||
|
||
```ts
|
||
import { Button } from 'ui/button'
|
||
import { useUser } from 'business/user'
|
||
import { formatDate } from 'shared/utils/date'
|
||
```
|
||
|
||
**Плохо**
|
||
|
||
```ts
|
||
// Относительный путь между модулями
|
||
import { Button } from '../../../ui/button'
|
||
|
||
// Префикс @/, которого нет в paths
|
||
import { Button } from '@/ui/button'
|
||
|
||
// Алиас на src — не предусмотрен
|
||
import { Button } from 'src/ui/button'
|
||
```
|
||
|
||
## Внутри модуля
|
||
|
||
Внутри своего модуля — относительные пути:
|
||
|
||
```ts
|
||
// src/ui/button/button.tsx
|
||
import styles from './button.module.css'
|
||
import { Icon } from './icon'
|
||
```
|
||
|
||
Не использовать алиас на самого себя:
|
||
|
||
```ts
|
||
// Плохо — алиас вместо относительного пути внутри модуля
|
||
import { Icon } from 'ui/button/icon'
|
||
```
|