Абсолютные импорты

Question 1

Абсолютные импорты

Answer 1

В файле tsconfig.json есть параметр baseUrl для указания корневой директории, относительно которой TypeScript будет разрешать пути к модулям.

Преимущества использования baseUrl:

-использование абсолютных путей вместо относительных;
-перемещение файлов и папок упрощается из-за стабильности путей к модулям;
-читаемый и понятный код, т. к. пути к модулям явно указывают на их место в проекте.

Абсолютные импорты - берем сущность из корневой папки -import {createTheme} from “@mui/material/styles”;
Относительные импорты - когда выпрыгиваем на несколько папок - import {ThemeMode} from “../../app/app-reducer.ts”;

Метод, который на Vite для создания абсолютных импортов:
1. Откройте файл tsconfig.app.json и добавьте в compilerOptions свойства baseUrl и paths
{
“compilerOptions”: {
“baseUrl”: “.”, //будет выпрыгивать с корневой папки проекта
“paths”: {
“@/”: [“src/”] //алиас, который будет показываться @/* вместо src
},
/…/
},
“include”: [“src”]
}

2. В webpack будет достаточно, если в вите, то необходимо еще - откройте файл vite.config.ts и добавьте в конфигурацию свойство resolve с полем alias:
   import path from ‘path’;
   import { defineConfig } from ‘vite’
   import react from ‘@vitejs/plugin-react-swc’

// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
‘@/’: ${path.resolve(\_\_dirname, 'src')}/,
},
},
})

3. Для разрешения импорта path и переменной __dirname добавьте в devDependencies проекта типизацию node:
   pnpm add @types/node -D