如何在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

这可以在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';

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

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

更新 看看我展示如何映射到单个文件的示例:

https://github.com/ialex90/TypeScript-Node-Starter/commit/a4e8cc1f8f8d5176e0099e05b51f97b0ef4bebea

Answer 2

如果您正在寻找使用 引用根文件夹的最简约示例@，那么就是：

{
  "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';

Answer 3

如果您正在使用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...

Answer 4

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

假设root位于最顶层的srcdir(我正确读取你的图像)使用

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

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

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

Answer 5

这对我有用：

 yarn add --dev tsconfig-paths

 ts-node -r tsconfig-paths/register <your-index-file>.ts

这会加载 tsconfig.json 中的所有路径。示例 tsconfig.json：

{
    "compilerOptions": {
        {…}
        "baseUrl": "./src",
        "paths": {
            "assets/*": [ "assets/*" ],
            "styles/*": [ "styles/*" ]
        }
    },
}

确保你有 baseUrl 和路径才能工作

然后你可以像这样导入：

import {AlarmIcon} from 'assets/icons'

Answer 6

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

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

Answer 7

如果您使用路径，则需要将绝对路径改回相对路径，以便在使用tsc.

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

我试过了，但它对我的复杂设置不起作用。此外，它在运行时解析路径，这意味着包大小和解析性能方面的开销。

所以，我自己写了一个解决方案，tscpaths。

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

该项目还很年轻，因此如果您的设置非常复杂，可能会出现一些问题。它对我的设置完美无缺，尽管我的设置相当复杂。

Answer 8

它的相对路径而不是下面的代码

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

我们可以避免 "../../../../../" 它看起来很奇怪而且不可读。

所以 Typescript 配置文件有相同的答案。只需指定 baseUrl，config 将处理您的相对路径。

配置方式： tsconfig.json 文件添加以下属性。

"baseUrl": "src",
    "paths": {
      "@app/*": [ "app/*" ],
      "@env/*": [ "environments/*" ]
    }

所以最后它看起来像下面

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

它看起来简单，很棒，更易读..

Answer 9

使用：

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

我不确定我们是否必须定义路径。但是将baseUrl写入src后。我可以像这样导入src文件夹下的所有文件夹：

import { Home } from "pages";
import { formatDate } from "utils";
import { Navbar } from "components";

更改tsconfig.json后不要忘记重新启动终端。

Answer 10

如果正在使用 typescript + webpack 2 + at-loader，还有一个额外的步骤（@mleko 的解决方案只对我有用）：

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

// webpack.config.js
const { TsConfigPathsPlugin } = require('awesome-typescript-loader');

resolve: {
    plugins: [
        new TsConfigPathsPlugin(/* { tsconfig, compiler } */)
    ]
}

TypeScript 2.0 中的高级路径解析

Answer 11

亚历杭awesome-typescript-loader德罗斯（Alejandros）的答案对我有用，但是当我在webpack 4中使用时，我还必须将其添加tsconfig-paths-webpack-plugin到我的webpack.config文件中才能正确解析。