Почему алиасы не функционируют?

Question

Алексей

typescript , node.js

Почему алиасы не функционируют?

<b>Проблема с алиасами в проекте</b> <br/> <br/> У меня возникла проблема с использованием алиасов в проекте. В файле <b>main.ts</b> я импортирую модули, используя алиасы, но они, похоже, не работают. Вот код из <b>main.ts</b>: <pre><code class="typescript">import logger from 'utils/logger/logger'
import { getBackendEnvironment } from './backend/backend.environments'
import { getGlobalEnvironment } from './environments'
import { getFrontendEnvironment } from './frontend/frontend.environments'
import { globalStateMachine } from './state-machine'
import { EnumLayoutType } from './types'

async function bootstrap() {
  await getGlobalEnvironment()

  console.log(globalStateMachine.layoutType)

  if (globalStateMachine.layoutType === EnumLayoutType.backend) {
    await getBackendEnvironment()
  } else if (globalStateMachine.layoutType === EnumLayoutType.frontend) {
    await getFrontendEnvironment()
    return
  } else {
    throw new Error('Layout type is not passed')
  }
}

bootstrap()
  .then(() =&gt;
    console.log(logger.success('The template has been successfully created!')),
  )
  .catch(error =&gt; {
    console.error(logger.error(error))
    process.exit(1)
  })
  .finally(() =&gt; console.log(logger.system('Process finished', '⏸️ ')))</code></pre> <br/> Также, вот настройки компилятора в <b>tsconfig.json</b>: <pre><code>{
  "compilerOptions": {
    "target": "ES2021",
    "module": "commonjs",
    "lib": ["ES2021"],
    "baseUrl": "./",
    "paths": {
      "src/*": ["src/*"],
      "utils/*": ["src/utils/*"]
    },
    "outDir": "dist",
    "esModuleInterop": true
  },
  "include": ["src"]
}</code></pre> <br/> И, наконец, вот часть <b>package.json</b>: <pre><code>{
  "name": "kirove-layout",
  "version": "2.0.0",
  "main": "src/main.ts",
  "private": false,
  "license": "MIT",
  "scripts": {
    "dev": "ts-node-dev --respawn --transpile-only --exit-child src/main.ts",
    "s

29 августа 2024 г. 15:14

Ответы на вопрос 2

Похожие вопросы

Answer 1

Проблема может заключаться в нескольких аспектах. Давайте рассмотрим ваши настройки и код, чтобы выявить возможные причины, по которым алиасы не работают.

### 1. Проверка конфигурации `tsconfig.json`

В ваших настройках `tsconfig.json` вы указали алиасы следующим образом:

```json
"paths": {
"src/*": ["src/*"],
"utils/*": ["src/utils/*"]
}
```

Это означает, что вы можете использовать алиасы, начинающиеся с `src/` и `utils/`. Однако в вашем коде импорты выглядят следующим образом:

```typescript
import logger from 'utils/logger/logger'
```

Если `utils` — это алиас, то вам нужно убедиться, что он правильно настроен в `tsconfig.json` (что вроде бы так и есть).

### 2. Использование алиасов в `ts-node`

Если вы используете `ts-node` для запуска вашего проекта, нужно убедиться, что он поддерживает алиасы из `tsconfig.json`. Попробуйте это сделать, используя флаг `-r tsconfig-paths/register` в вашем скрипте `dev` в `package.json`. Например:

```json
"scripts": {
"dev": "ts-node-dev --respawn --transpile-only --exit-child -r tsconfig-paths/register src/main.ts",
}
```

Эта настройка подскажет `ts-node`, как разрешать пути на основе ваших алиасов.

### 3. Структура папок и файлов

Убедитесь, что у вас действительно есть структура папок и имен файлов, соответствующая алиасам. Например, файл `logger.ts` должен находиться по пути `src/utils/logger/logger.ts`.

### 4. Перезапуск сервера

После внесения изменений в конфигурацию и скрипты, убедитесь, что вы перезапускаете сервер разработки, чтобы изменения вступили в силу.

### 5. Убедитесь в отсутствии опечаток

Проверьте, что нет опечаток в пути или в алиасах, что вполне может быть источником проблемы.

### Заключение

Попробуйте внести изменения в скрипт `dev` и перезапустить его. Если алиасы все ещё не работают, проверьте структуру каталогов и наличие соответствующих файлов. Если проблема не решится, рассмотрите возможность использования отладчика для уточнения ситуации.

Answer 2

paths в tsconfig - это чисто справочная информация для подсветки, добавленная из расчёта, что вы уже используете какой-то сборщик который такие пути умеет. 
 Сам по себе он влияет точно и исключительно на подсветку, нужны сторонние сборщики и\или модули. 
 Это by design и wont fix. 
 
 Предполагаемое разработчиками решение: взять какой-ниь vite или webpack и настроить там руками точно такие же алиасы. 
 Популярный костыль, который сделает это за тебя для любых вариантов, в том числе и ts-node: tsconfig-paths