如何在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足够？

Answer 1

您可以使用组合baseUrl和paths 文档。

假设根目录位于最高src目录（我正确读取了您的图片），请使用

// tsconfig.json

{

  "compilerOptions": {

    ...

    "rootDir": ".",

    "paths": {

      "lib/*": [

        "src/org/global/lib/*"

      ]

    }

  }

}

因为webpack您可能还需要添加模块分辨率。因为webpack2这看起来像

// webpack.config.js

module.exports = {

    resolve: {

        ...

        modules: [

            ...

            './src/org/global'

        ]

    }

}

Answer 2

如果您使用的是路径，则在将typescript编译为纯javascript之后，您需要将绝对路径改回相对路径，以使其正常工作tsc。

到目前为止，最流行的解决方案是tsconfig-paths。

我已经尝试过了，但是对于我的复杂设置来说，它不起作用。此外，它还可以在运行时解析路径，这意味着在程序包大小和性能方面的开销。

因此，我自己写了一个解决方案tscpaths。

我会说总体上更好，因为它在编译时会替换路径。这意味着没有运行时依赖性或任何性能开销。使用起来非常简单。您只需要在中的构建脚本中添加一行即可package.json。

该项目还很年轻，所以如果您的设置非常复杂，可能会出现一些问题。尽管我的设置相当复杂，但它对我的设置而言是完美的。