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

这可以在你的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作为您指向的路线的基础，并且必须按照文档中的说明进行操作。

角色＆＃39; @＆＃39;不是强制性的。

以这种方式进行设置后，您可以轻松地使用它：

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

您可以结合使用baseUrl和paths docs。

假设root位于最顶层的src目录上（并且我正确读取了您的图像），请使用

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

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

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

Answer 3

使用星号检查此类似解决方案

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

Answer 4

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

Answer 5

如果您使用的是路径，则需要使用tsc将打字稿编译为纯JavaScript后，才能将绝对路径改回相对路径，以使其正常工作。

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

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

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

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

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

Answer 6

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

// 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 7

2021 年的解决方案。

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

第一步。

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 8

使用this

检出编译器操作

我在文件中为以下项目添加了baseUrl：

"baseUrl": "src"

工作正常。因此，为您的项目添加基本目录。

Answer 9

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

Answer 10

它的相对路径代替下面的代码

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 11

似乎已对React进行了更新，不允许您再在"paths"中设置tsconfig.json。

好的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

这将通过向您的项目中添加create-react-scripts和config目录以及构建/配置文件来弹出所有scripts设置。通过更新{project}/config/*文件，这也允许 更多控制权 来控制一切的构建，命名等方式。

然后更新您的tsconfig.json

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

Answer 12

这对我有用：

 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 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

如果我没有弄错，./表示从文件的当前目录开始，而/表示从根目录开始。因此，您可以使用../

替换开头的所有/

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

14 个答案: