如何在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.jsmodule.exports = {    resolve: {        ...        modules: [            ...            './src/org/global'        ]    }}

Answer 2

如果您使用的是路径，则在将typescript编译为纯javascript之后，您需要将绝对路径改回相对路径，以使其正常工作tsc。到目前为止，最流行的解决方案是tsconfig-paths。我已经尝试过了，但是对于我的复杂设置来说，它不起作用。此外，它还可以在运行时解析路径，这意味着在程序包大小和性能方面的开销。因此，我自己写了一个解决方案tscpaths。我会说总体上更好，因为它在编译时会替换路径。这意味着没有运行时依赖性或任何性能开销。使用起来非常简单。您只需要在中的构建脚本中添加一行即可package.json。该项目还很年轻，所以如果您的设置非常复杂，可能会出现一些问题。尽管我的设置相当复杂，但它对我的设置而言是完美的。