tsc - не компилирует псевдонимы путей

У меня есть машинопись и я использую псевдонимы. Вот часть tsconfig.json

"compilerOptions": {
  "baseUrl": "./src",
   ...
},

Установив базовый URL, я могу изменить

import User from "src/models/User.model.ts"

к

import User from "models/User.model.ts"

Проблема в том, что tsc компилирует папку src в папку dist, поэтому путь импорта пользователя должен быть изменен на относительный путь примерно так:

"../models/User.model.js"

Но это не меняется, поэтому я получаю следующую ошибку:

"models/User.model.js" not found

Я искал ответ, но безуспешно.

7 ответов

Компилятор TSC сам по себе не может разрешить псевдонимы путей. Поэтому, чтобы заставить его работать, вам потребуется установить дополнительный пакет dev.

      npm install --save-dev tsc-alias

tsc-alias предназначен для замены путей псевдонимов относительными путями после машинописной компиляции компилятора tsc, поскольку компилятор сам по себе не может разрешить пути псевдонимов

После этого вам нужно изменить команду сборки в файле package.json на

      "build": "tsc && tsc-alias",

Бег npm run buildпосле этого должно работать, и код должен быть правильно скомпилирован в javascript

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

      npm install --save-dev concurrently

concurrently для одновременного запуска нескольких команд

После этого вам нужно будет добавить 1 новый скрипт в файл package.json.

      "build:watch": "concurrently --kill-others \"tsc -w\" \"tsc-alias -w\"",

Бег npm run build:watchпосле этого должно работать, и код должен быть правильно скомпилирован в javascript с функцией горячей перезагрузки

Обратите внимание: я использую эти версии пакетов

      "tsc-alias": "^1.5.0",
"typescript": "^4.5.5",
"concurrently": "^7.0.0",

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

Об этом долго обсуждается проблема машинописного текста, и я не могу найти лучшего решения, чем это.

Разработка

      npm i -save-dev tsconfig-paths/register

tsconfig.json

      {
 "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@src/*": ["src/*"],
    },   
  }
}

пакет.json

      "scripts": {
  dev: "ts-node -r tsconfig-paths/register src/index.ts"
}

Строить

      npm i -save-d ttypescript @zerollup/ts-transform-paths

tsconfig.json

      {
 "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@src/*": ["src/*"],
    },   
  }
 "plugins": [
      {
          "transform": "@zerollup/ts-transform-paths",
      }
  ],
}

пакет.json

      "scripts": {
  build: "ttsc -P ./tsconfig.json"
}

ttypescript

Машинопись-преобразование-пути

https://github.com/tleunen/babel-plugin-module-resolver

package.json часть

"build": "ttsc && babel dist -d dist",

ttsc это не ошибка, это надстройка над конфигурацией машинописного текста для более сложной пересылки

tsconfig.json часть

"outDir": "dist",
"baseUrl": "./",
"paths": {
    "@/*": [
        "./src/*"
    ],
    "$/*": [
        "./tests/unit/*"
    ]
},
"plugins": [
    {
        "transform": "typescript-transform-paths",
        "afterDeclarations": true
    }
],

.babelrc весь контент

{
  "compact": false,
  "retainLines": true,
  "minified": false,
  "inputSourceMap": false,
  "sourceMaps": false,
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./dist"],
        "alias": {
          "@": "./dist"
        }
      }
    ]
  ]
}

Оказывается, решить эту проблему очень просто. Пока вы определяете правильный путь внутриpathвот так в файлеtsconfig.json

И соберите (транспилируйте TS в JS) с помощью командыtsc && tsc-alias. Это будет работать. Также убедитесь, что вы установили машинописный текст для включения tsc и tsc-alias для включения команды tsc-alias, указанной выше. Вы можете сделать это с помощьюnpm i --save-dev typescript npm i --save-dev tsc-alias.

Вот решение, которое я использую:

  • машинопись
  • @zerrollup/ts-transform-пути
  • tsc-часы

Как:

Установка через нпм:

      npm install -D ttypescript @zerollup/ts-transform-paths tsc-watch

В tsconfig.json добавляем:

      {
  "compilerOptions": {
    "paths": {
      "@app/*": ["./*"]
    },
    "baseUrl": "src",
    "outDir": "./dist",
    "plugins": [
      {
        "transform": "@zerollup/ts-transform-paths",
        "exclude": ["*"]
      }
    ]
    ...
  },
  ...
}

В package.json скрипты выглядят так:

      {
  ...
  "scripts": {
    "start": "node dist/server.js",
    "build": "ttsc",
    "watch": "tsc-watch --compiler ttypescript/bin/tsc --onSuccess 'npm start'",
    "watch-only": "ttsc -w",
    ...
  },
}

Вам просто нужно сообщить узлу базовый URL-адрес с переменной среды NODE_PATH, чтобы он мог разрешать абсолютные пути:

      NODE_PATH=dist/ node ./dist/index.js

Вот зависимости от разработчиков, которые вам нужныts-node,tsconfig-pathsиtypescript-transform-pathsи конфигурация машинописного текста

      {
  "ts-node": {
    "transpileOnly": true,
    "require": [
      "typescript-transform-paths/register",
      "tsconfig-paths/register"
    ]
  },
  "compilerOptions": {
    ...
    "plugins": [{"transform": "typescript-transform-paths"}]
  },
  ...
}

Другие вопросы по тегам