Question

我的项目结构是 SRC / 客户/ 模块/ 服务器/ 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'.

在app.ts中的import * as DB from '@modules/DB';

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

baseUrl和paths选项，不能将“@ modules / DB”更改为“../modules/DB”？然后，他们做了什么？

Answer 1

这里的问题是TypeScript编译器不会更新JS文件中的路径，并且JavaScript引擎对您的TypeScript配置一无所知，您在tsconfig中指定的内容仅用于＆＃34;编译时间＆＃34;，当您将TypeScript编译为JS时，您需要执行与TS编译器相同的工作，但要将已解析的路径保存在JS文件中。

简而言之，需要处理所有JS文件，并将别名替换为＆＃34; real＆＃34;路径。

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

安装tspath和npm工具来解析ts路径注意：tspath需要一个非常新的节点专长！

npm install -g tspath

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

tspath

或

tspath -f

跳过提示！

阅读详情：https://www.npmjs.com/package/tspath

tsconfig.json的baseUrl不起作用

1 个答案: