如何使用 tsconfig.json 中的路径？

Question

我在 tsconfig.json 中阅读了有关 path-mapping 的内容，我想使用它来避免使用以下难看的路径：

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

如何配置 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 docs。

假设 root 位于最顶层 src 目录（并且我正确阅读了您的图片）使用

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

对于 webpack，您可能还需要添加 module resolution。对于 webpack2 这可能看起来像

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

Answer 2

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

您可能唯一注意到的是智能感知在当前最新版本中不起作用，因此我建议遵循 importing/exporting 文件的索引约定。

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

Answer 3

如果使用 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 } */)
    ]
}

Advanced path resolution in TypeScript 2.0

Answer 4

用星号勾选类似的解决方案

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

Answer 5

Alejandros 的回答对我有用，但是当我将 awesome-typescript-loader 与 webpack 4 一起使用时，我还必须将 tsconfig-paths-webpack-plugin 添加到我的 webpack.config 文件中才能解决正确

Answer 6

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

将打字稿编译成普通 javascript 后，它才能正常工作

到目前为止，最受欢迎的解决方案是 tsconfig-paths。

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

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

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

中的构建脚本中添加一行

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

Answer 7

/ 仅从根开始，要获得我们应该使用的相对路径 ./ 或 ../

Answer 8

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

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

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

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

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

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

所以最后它看起来像下面

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

它看起来简单、很棒而且可读性更强..

Answer 9

看起来 React 已经更新，不再允许您在 tsconfig.json 中设置 "paths"。

Nicely React 只是输出一个警告：

The following changes are being made to your tsconfig.json file:
  - compilerOptions.paths must not be set (aliased imports are not supported)

然后更新您的 tsconfig.json 并为您删除整个 "paths" 部分。有一种方法可以解决这个问题运行

npm run eject

这将通过将 config 和 scripts 目录以及 build/config 文件添加到项目中来弹出所有 create-react-scripts 设置。这也允许 更多控制 通过更新 {project}/config/* 文件如何构建、命名等。

然后更新你的tsconfig.json

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

Answer 10

这对我有用：

 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 11

使用this

检查编译操作

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

"baseUrl": "src"

它工作正常。所以为你的项目添加你的基本目录。

Answer 12

2021 年的解决方案。

注：加拿大税务局。最初使用第三方库或弹出应用程序作为别名的想法对我来说似乎很疯狂。然而，经过 8 小时的搜索（并尝试使用 eject 的变体），事实证明这个选项是最不痛苦的。

步骤 1.

yarn add --dev react-app-rewired react-app-rewire-alias

第 2 步。在项目的根目录中创建 config-overrides.js 文件并填写 :

const {alias} = require('react-app-rewire-alias')

module.exports = function override(config) {
  return alias({
    assets: './src/assets',
    '@components': './src/components',
  })(config)
}

第 3 步。修复您的 package.json 文件：

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
    "eject": "react-scripts eject"
}

如果@declarations 不起作用，请将它们添加到d.ts 文件中。例如： '@constants': './src/constants', => 添加 react-app-env.d.ts declare module '@constants';

就是这样。现在您可以像往常一样继续使用 yarn 或 npm start/build/test 命令。

Full version in docs.

注意：文档 中的 'Using with ts / js config' 部分对我不起作用。构建项目时仍然存在“不支持别名导入”的错误。所以我用了一个更简单的方法。幸运的是它有效。

Answer 13

如果您使用的是 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 14

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

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

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

不要忘记在更改 tsconfig.json

后重新启动终端

Answer 15

您可以使用 Subpath patterns.

仅使用 Node 来完成此操作

例如，将此添加到您的 package.json...

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

...将允许您像这样导入，避免相对路径。

import { something } from "#lib"

请注意，它们必须以哈希开头，并且在 package.json 中，它们必须指向您的构建，以便 Node 可以识别它。

正如其他人所说，您可以在 tsconfig.json 中为 Typescript 添加类似的内容：

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

Answer 16

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

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

如何使用 tsconfig.json 中的路径？

How to use paths in tsconfig.json?

typescript

node-modules

tsconfig