时间戳

首页 > 解决方案 > 使用具有多个 tsconfig 的自定义导入路径时找不到模块

typescript - 使用具有多个 tsconfig 的自定义导入路径时找不到模块

问题描述

我有一个包含多个tsconfig.json文件的项目。我想缩短所有进口，但由于某种原因，缩短进口在特定情况下不起作用。

项目结构：

foo/
|  main.ts
|  tsconfig.json
projects/
|  bar/
|    index.ts
tsconfig.json

每当我想编译时foo/main.ts，我都会收到以下错误：Cannot find module @bar/shared.

一些细节：

该projects/bar/index.ts文件只是导出一个普通类：export class Foo {}

foo/main.ts尝试导入类Foo：

import {Foo} from '@bar/shared';

最后但并非最不重要的tsconfig.jsoninside foo：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "resolveJsonModule": true,
    "lib": ["es6", "dom"],
    "types": [
      "node"
    ],
    "outDir": "../dist/foo"
  }
}

和根tsconfig.json：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "@bar/shared": ["projects/bar"]
    }
  }
}

我的 IDE 完全满意 - 但我无法编译。

标签： typescript

解决方案

简答

在您的foo/tsconfig.json文件中，删除该baseUrl条目，因为它错误地覆盖baseUrl了根tsconfig.json文件中的条目。

细节

该baseUrl值是解析非相对模块名称和paths映射条目的基本目录。结果，在解析@bar/shared映射条目时，模块解析策略搜索相baseUrl对于./src. 此外，由于./src是相对路径，因此其完整路径基于其/foo/tsconfig.json文件的位置。因此，路径映射条目解析为./foo/src/projects/bar/.

所有这些细节和更多信息都可以在模块解析文档中找到。

--traceResolution

解决这些错误的一个很好的工具是使用该--traceResolution选项进行构建。对于您的项目设置，使用它从foo/目录构建包括以下输出：

将模块加载为文件/文件夹、候选模块位置'C:/dev/temp/foo/src/projects/bar'、目标文件类型“TypeScript”。

运行

TypeScript 路径映射允许路径映射，但不会重写这些路径。运行时（在您的情况下node）必须知道如何查找@bar/shared. 您还需要使用路径映射配置运行时。这是一个node可以让你这样做的包：https ://www.npmjs.com/package/module-alias

推荐阅读