абсолютный путь в tsconfig доза не работает
Я видел несколько вопросов по этой проблеме, ни один из них не работает. У меня есть проект nodejs вместе с Typescript. Я не люблю использовать относительный путь. Когда я задаю путь в tsconfig, я получаю следующую ошибку:
Не удается найти модуль @app/controllers/main
// main.ts
export const fullName = "xxxx";
...
// app.ts
import { fullName } from '@app/controllers/main'
...
Это структура моего проекта:
-node_modules
-src
----controllers
---------------main.ts
----app.ts
-package.json
-tsconfig.json
tsconfig:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"baseUrl": ".",
"paths": {
"@app/*": ["src/*"]
},
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
}
}
Где моя проблема?
Заранее спасибо.
5 ответов
К сожалению (и я не знаю почему) компилятор Typescript в настоящее время не очень хорошо поддерживает преобразование путей.
Вот мое решение:
Я использовал решение с этим проектом.
Установить devDependencies
- ttypescript ->npm install ttypescript --save-dev -> TTypescript (Transformer TypeScript) решает проблему, исправляя на лету модуль компиляции для использования преобразователей из tsconfig.json.
- https://github.com/LeDDGroup/typescript-transform-paths ->npm install typescript-transform-paths --save-dev -> Преобразует абсолютный импорт в относительный из путей в вашем tsconfig.json.
- tsconfig-paths ->npm install tsconfig-paths --save-dev -> Используйте это для загрузки модулей, расположение которых указано в разделе путей файла tsconfig.json. Поддерживается как загрузка во время выполнения, так и через API.
- ts-node-dev ->npm install ts-node-dev --save-dev -> Он перезапускает процесс целевого узла при изменении любого из требуемых файлов (как стандартный node-dev), но разделяет процесс компиляции Typescript между перезапусками
tsconfig.json
Обновите файл tsconfig.json со следующими параметрами:
{
"compilerOptions": {
/* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
"paths": {
"@app/*": [
"./src/*"
]
},
/* Advanced Options */
"plugins": [
{
"transform": "typescript-transform-paths"
}
],
}
}
Построить
На этапе компиляции используйте ttsc вместо tsc с файлом конфигурации. См. Фрагмент ниже:
npx ttsc --p ./tsconfig.json
Режим разработки с автоперезагрузкой
Когда вы находитесь в режиме разработки, используйте следующий сценарий (поместите его в параметры сценариев в package.json), чтобы автоматически перезагрузить проект с правильными путями. В SRC /app.ts является "точкой входа" вашего приложения, расположенным под Src папки.
npx ts-node-dev --prefer-ts true --no-notify -r tsconfig-paths/register --watch src --transpileOnly src/app.ts
PS: Использование ts-node-dev значительно увеличивает скорость.
Я немного подправляю ответ @Carlo Corradini, вот мой подход к решению этой проблемы.
установить необходимые плагины:
npm i -D typescript typescript-transform-paths ts-node tsconfig-paths
. это пакеты, которые помогут нам преобразовать пути.затем в tsconfig.json я помещаю:
{ "ts-node": { "transpileOnly": true, "require": [ // set this so you dont need to use ts-node -r "typescript-transform-paths/register", "tsconfig-paths/register" ] }, "compilerOptions": { "composite": true, "rootDir": ".", // must define "baseUrl": "src", // must define, the paths will relative to this "outDir": "lib", "skipLibCheck": false, "paths": { "@app/*": ["./*"], "@controllers/*": ["./controllers/*"], }, "plugins": [ { "transform": "typescript-transform-paths" } ] } }
то в ваших кодах вы можете использовать:
import myControllers from "@controllers/main.ts"
теперь вы можете скомпилировать,
npx tsc -p tsconfig.json
и для запуска на ts-узле используйте
npx ts-node -p tsconfig.json src/app.ts
Ваш синтаксис правильный.
Похоже, что на момент написания ts-node-dev
не поддерживает paths
вход tsconfig.json
.
В этом выпуске github обсуждается проблема и представлены варианты обхода.
Обновление (по состоянию на март 2023 г.)
Предыдущие ответы были полезны для разработки, но я все еще сталкивался с проблемами в производстве при запуске файла сборки.
Я решил эту проблему раз и навсегда с помощьюпакет в сборке ив развитие.
Инструкции по настройке:
- Установите & как зависимость разработчика с помощью:
npm i -D tsc-alias tsconfig-paths
- Использовать
tsconfig-paths
в вашем сценарии разработки или запуска следующим образом:
{
"scripts": {
"dev": "ts-node-dev -r tsconfig-paths/register src/index.ts", // here I am using ts-node-dev
"start": "ts-node -r tsconfig-paths/register src/index.ts" // works with node too, see tsconfig-paths doc
},
"devDependencies": {
"tsconfig-paths": "^4.1.2",
"typescript": "^4.9.5"
}
}
- Добавить
tsc-alias
в скрипте сборки. В вашейpackage.json
:
{
"scripts": {
"build": "tsc -p tsconfig.json && tsc-alias -p tsconfig.json"
},
"devDependencies": {
"tsc-alias": "^1.8.3",
"typescript": "^4.9.5"
}
}
Вот и все. Вы сделали. Теперь вы можете использовать как псевдоним пути, так и абсолютный импорт, и создавать свое приложение без каких-либо проблем.
Вот мойtsconfig.json
для справки:
{
"compilerOptions": {
"module": "commonjs",
"baseUrl": "src", // notice my base url is set to ./src folder
"resolveJsonModule": true,
"outDir": "./build",
"paths": {
"@middlewares": ["_globals/middlewares"], // referring to ./src/_globals/middlewares folder
"@exceptions": ["_globals/exceptions"],
"@utils": ["_globals/utils"]
}
},
"include": [ "src/**/*" ], // if you need absolute path or path alias outside src then include the directory accordingly
"exclude": ["src/test.ts"] // import won't work in this file/directory
}
Применение
Теперь вы можете использовать как абсолютный импорт, так и псевдоним пути:
import { sth } from "_globals/sth"; // using absolute imports
import { sth } from "@utils"; // using path alias
Ваш файл сборки также должен работать без каких-либоmodule not found
ошибки.
где-то такое видел - В файле tsconfig.json =>
{"compilerOptions": {... другие правила,"baseUrl": "./src"},"include": ["src"]}
Оно работает