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

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

如何配置tsconfig中的路径?Json,而不是:

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

我可以使用:

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

webpack配置中还需要其他东西吗?或者是tsconfig。json足够了吗?


当前回答

使用这个检出编译器操作

我在文件中添加了baseUrl项目如下:

“baseUrl " src "

它工作得很好。因此,为项目添加基本目录。

其他回答

用星号检查类似的解决方案

  "baseUrl": ".",
  "paths": {
    "*": [
      "node_modules/*",
      "src/types/*"
    ]
  },

您可以通过使用子路径模式仅使用Node来实现这一点。

例如,将此添加到package.json…

{
    "imports": {
        "#lib": "./build/path/to/lib",
        "#lib/*": "./build/path/to/lib/*",
    }
}

...会让你像这样导入,避免相对路径。

import { something } from "#lib"

注意,它们必须以散列开头,并且在package中。json,它们必须指向你的构建,这样Node才能识别它。

正如其他人所说,您可以在tsconfig中添加这样的内容。json for Typescript:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "#lib": ["./src/path/to/lib"],
            "#lib/*": ["./src/path/to/lib/*"],
        },
    },
}

确保你有 ` { “compileOnSave”:没错, " compilerOptions ": { "路径":{ “@styles /”:(“资产/ scss /”) } }, }

` 这给我带来了麻烦。

这可以在您的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

你可以结合使用baseUrl和路径文档。

假设根在最上面的src目录(我正确地阅读了你的图像)使用

// tsconfig.json
{
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "lib/*": [
        "src/org/global/lib/*"
      ]
    }
  }
}

对于webpack,你可能还需要添加模块解析。对于webpack2,这可能是这样的

// webpack.config.js
module.exports = {
    resolve: {
        ...
        modules: [
            ...
            './src/org/global'
        ]
    }
}