使用具有多个通配符的 Globbing 模式在 TypeScript 中进行模块解析

Question

我正在处理具有以下文件夹结构（假设）的 Angular 项目：

src
└── app
    ├── component1
    │   └── component1.component.ts
    └── component2
        └── component2.component.ts
tsconfig.json

在我的 tsconfig.json 中，我试图定义一个具有通配模式的路径，从 @components/component1 导入的方式将解析为 src/app/component1/component1.component。

这是我的 tsconfig.json:

OTHER STUFF...

"baseUrl": "src",
"paths": {
  "@components/*": ["app/*/*.component"]
}

有了这个，我在一些 module/service/etc.:

中有以下导入

import { Component1 } from '@components/component1';

我在编译时遇到的错误是：

ERROR in error TS5062: Substitution 'app/*/*.component' in pattern '@components/*' in can have at most one '*' character.

如何在不导致 TypeScript 编译器出错的情况下实现此目的？在 tsconfig.json 中编写 globbing 模式的正确方法是什么？

感谢任何帮助。

我不想做 @components/component1/component1。

Answer 1

正如编译器错误所说，paths 条目中不能超过一个 *。

这可以通过 Webpack 别名解决，可能是通过第三方插件。如果项目使用 Angular CLI，Webpack 配置必须被弹出。

导入像 @components/component1/component1 这样的单独文件的问题通常用 barrels 解决，这些 index.ts 文件重新导出目录内容：

export * from './component1.component';

Module Resolution in TypeScript using Globbing Pattern with multiple wildcards