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"
}
Машинопись-преобразование-пути
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"}]
},
...
}