如何在 tsconfig.json 中使用路径？

Question

我正在阅读 tsconfig.json 中的 路径映射，我想用它来避免使用以下丑陋的路径：

项目组织有点奇怪，因为我们有一个包含项目和库的单一存储库。这些项目按公司和浏览器/服务器/通用分组。

如何配置 tsconfig.json 中的路径，而不是：

 import { Something } from "../../../../../lib/src/[browser/server/universal]/...";

我可以用：

 import { Something } from "lib/src/[browser/server/universal]/...";

webpack 配置中是否需要其他内容？或者 tsconfig.json 足够了吗？

原文由 Remo H. Jansen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这可以在您的 tsconfig.json 文件中设置，因为它是 TS 功能。

你可以这样做：

 "compilerOptions": {
        "baseUrl": "src", // This must be specified if "paths" is.
         ...
        "paths": {
            "@app/*": ["app/*"],
            "@config/*": ["app/_config/*"],
            "@environment/*": ["environments/*"],
            "@shared/*": ["app/_shared/*"],
            "@helpers/*": ["helpers/*"]
        },
        ...

请记住，您要引用的路径将您的 baseUrl 作为您指向的路线的基础，并且如文档中所述，它是强制性的。

字符“@”不是强制性的。

以这种方式设置后，您可以像这样轻松使用它：

 import { Yo } from '@config/index';

您可能会注意到的唯一一件事是智能感知在当前最新版本中不起作用，因此我建议遵循索引约定来导入/导出文件。

https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

原文由 Alejandro Lora 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

baseUrl 正确很重要。

 import Home from '@app/features/Home';

src/features/Home.tsx

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

原文由 Emre 发布，翻译遵循 CC BY-SA 4.0 许可协议