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

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

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

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

我可以使用:

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

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


当前回答

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

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

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

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

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

其他回答

如果你正在寻找用@引用根文件夹的最简单的例子,这将是它:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"]
    }
  }
}
// Example usage: import * as logUtils from '@/utils/logUtils';

或者如果你甚至没有src文件夹,或者想要显式地将它包含在导入中,这也可以工作:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["*"]
    }
  }
}
// Example usage: import * as logUtils from '@/src/utils/logUtils';

Alejandros的答案对我有用,但是当我在webpack 4中使用awesome-typescript-loader时,我还必须在我的webpack中添加tsconfig-paths-webpack-plugin。配置文件以正确解析

如果你正在使用tsconfig-paths,这对你不起作用,试试tsconfig.json:

{
  // ...
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": "src",
    "baseUrl": ".",
    "paths": {
      "@some-folder/*": ["./src/app/some-folder/*", "./dist/app/some-folder/*"],
      // ...
    }
  },
  // ...
}

如果编译器看到@some-folder/some-class,它会试图在./src…或在。/dist....

正确是很重要的。

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

src /功能/ Home.tsx

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

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

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

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

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

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