tsconfig.json 的 baseUrl 不起作用

Question

我的项目结构是src/client/modules/server/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 和路径选项，不能将“@modules/DB”更改为“../modules/DB”吗？那么，他们是做什么的？

Answer 1

这里的问题是 TypeScript 编译器不会更新 JS 文件中的路径，并且 JavaScript 引擎对 TypeScript 配置一无所知，当您将 TypeScript 编译为 JS 时，您在 tsconfig 中指定的内容仅用于“编译时”您需要执行与 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