tsconfig.json的baseUrl不起作用

Question

我的项目结构是src/客户端/模块/服务器/应用

---

src/
client/
modules/
DB/
server/
app.ts
tsconfig.json

我在app.ts文件中使用非相对导入导入导入模块

import * as DB from '@modules/DB';

因为我不想使用from "../modules/DB"

我的tsconfig.json是

{
"compileOnSave": true,
"compilerOptions": {
"module": "commonjs",
"target": "ES6",
"noImplicitAny": true,
"sourceMap": true,
"preserveConstEnums": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": true,
"traceResolution": true,
"rootDir": "./src",
"outDir": "./dist",
"declaration": true,
"typeRoots": [
"/"
],
"baseUrl": "./src",
"paths": {
"@modules/*": [
"modules/*"
]
}
},
"exclude": [
"src/client/"
]

}

当我追踪分辨率时，得到了这个

======== Module name '@modules/DB' was successfully resolved to '/Users/pengju/projects/pomelo-ts-starter/src/modules/DB/index.ts'. ========

它似乎成功地导入了

但在编译时，vscode仍然与错误

[ts] Cannot find module '@modules/DB'. 

应用中的import * as DB from '@modules/DB';

然后我检查编译的app.js，查找const DB = require("@modules/DB");

baseUrl和路径选项，是否不能将"@modules/DB"更改为"../modules/DB"？那么，他们是做什么的呢？

Answer 1

这里的问题是TypeScript编译器不会更新JS文件中的路径，而JavaScript引擎对您的TypeScript配置一无所知，您在tsconfig中指定的仅用于"编译时"，当您将TypeScript编译为JS时，您需要做与TS编译器相同的工作，但要将解析的路径保存在JS文件中。

简单地说，所有JS文件都需要处理，并用"真实"路径替换别名。

人们经常建议WebPack是一个怪物，有一个非常简单的工具叫做tspath，你在项目目录中运行它，它会读取你的tsconfig.json并相应地更新JS源文件！

安装tspath一个用于解析ts路径的npm工具注意：tspath需要一个最新版本的节点！

npm install -g tspath

运行TypeScript编译器后，从项目目录中运行：

tspath

或

tspath -f

跳过提示！

更多信息，请访问：https://www.npmjs.com/package/tspath