tsconfig 中的绝对路径不起作用 [英] absolute path in the tsconfig dose not work

问题描述

我看到了一些关于这个问题的问题，没有一个不起作用我有一个 nodejs 项目和 Typescript.我不喜欢使用相对路径.当我在 tsconfig 中设置路径时出现以下错误:

I saw some questions about this problem, none of them does not work I have a nodejs project along with Typescript. I do not like to use a relative path.I get the following error, when I set path in tsconfig :

找不到模块'@app/controllers/main'

Cannot find module '@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
    }
}

我的问题在哪里?

提前致谢.

推荐答案

很遗憾(我也不知道为什么)Typescript 编译器目前不能很好地支持路径转换.

Unfortunately (and I don't know why) the Typescript compiler currently does not support the paths transformation very well.

这是我的解决方案:

我在 this 项目中使用了该解决方案.

I used the solution with this project.

1. ttypescript ->npm install ttypescript --save-dev ->TTypescript(Transformer TypeScript)通过动态修补编译模块以使用来自 tsconfig.json 的转换器解决了这个问题.
2. typescript-transform-paths ->npm install typescript-transform-paths --save-dev ->将绝对导入从 tsconfig.json 中的路径转换为相对导入.
3. tsconfig-paths ->npm install tsconfig-paths --save-dev ->使用它来加载其位置在 tsconfig.json 的路径部分中指定的模块.支持在运行时加载和通过 API 加载.
4. ts-node-dev ->npm install ts-node-dev --save-dev ->当任何必需的文件发生更改(作为标准 node-dev)时，它会重新启动目标节点进程，但在重新启动之间共享 Typescript 编译过程

1. ttypescript -> npm install ttypescript --save-dev -> TTypescript (Transformer TypeScript) solves the problem by patching on the fly the compile module to use transformers from tsconfig.json.
2. typescript-transform-paths -> npm install typescript-transform-paths --save-dev -> Transforms absolute imports to relative from paths in your tsconfig.json.
3. tsconfig-paths -> npm install tsconfig-paths --save-dev -> Use this to load modules whose location is specified in the paths section of tsconfig.json. Both loading at run-time and via API are supported.
4. ts-node-dev -> npm install ts-node-dev --save-dev -> It restarts target node process when any of required files changes (as standard node-dev) but shares Typescript compilation process between restarts

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 和配置文件.请参阅下面的片段:

Build

For the compilation phase use ttsc instead of tsc with the configuration file. See the snippet below:

npx ttsc --p ./tsconfig.json

自动重载开发模式

当您处于开发模式时，请使用以下脚本(将其放在 package.json 中的脚本选项中)以使用正确的路径自动重新加载项目.src/app.ts 是入口点".位于 src 文件夹下的应用程序.

Development mode with autoreload

When you are in dev mode use the following script (put it in the scripts options in package.json) to automatically reload the project with the correct paths. The src/app.ts is the "entry point" of your application located under the src folder.

npx ts-node-dev --prefer-ts true --no-notify -r tsconfig-paths/register --watch src --transpileOnly src/app.ts

PS:使用 ts-node-dev 可以显着提高速度.

PS: Using ts-node-dev increase the speed significantly.

这篇关于tsconfig 中的绝对路径不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！