tsconfig.json 的 baseUrl 无效

Question

我的项目结构是来源/ 客户/ 模块/ 服务器/ app.ts

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.ts

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

baseUrl 和paths 选项，不能把“@modules/DB”改成“../modules/DB”？那么，他们是做什么的呢？

Answer 1

这里的问题是 TypeScript 编译器不会更新你的 JS 文件中的路径，并且 JavaScript 引擎对你的 TypeScript 配置一无所知，你在 tsconfig 中指定的内容只会被使用 "compile time"]，当你将 TypeScript 编译成 JS 时，你需要做与 TS 编译器相同的工作，但将解析后的路径保存在 JS 文件中。

简单来说，所有的JS文件都需要处理，别名替换成"real"个路径。

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

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

npm install -g tspath

在你拥有运行 TypeScript 编译器之后，从你的项目目录，运行:

tspath

或

tspath -f

跳过提示！

阅读更多信息：https://www.npmjs.com/package/tspath

tsconfig.json 的 baseUrl 无效

baseUrl of tsconfig.json does not work

typescript

tsconfig