看起来React已经更新了，不允许你在tsconfig中设置“路径”。json anylonger。

nice 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，并为您删除整个“路径”部分。有个办法可以绕过这条路

npm run eject

这将通过添加配置和脚本目录以及build/config文件到您的项目中，弹出所有的create-react-scripts设置。这也允许通过更新{project}/config/*文件来对所有内容的构建、命名等进行更多的控制。

然后更新tsconfig.json

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

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

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

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

您可以通过使用子路径模式仅使用Node来实现这一点。

例如，将此添加到package.json…

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

.．.会让你像这样导入，避免相对路径。

import { something } from "#lib"

注意，它们必须以散列开头，并且在package中。json，它们必须指向你的构建，这样Node才能识别它。

正如其他人所说，您可以在tsconfig中添加这样的内容。json for Typescript:

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

对于组件库

如果你正在处理一个返回UI组件的库(如react-bootstrap或antd)，那么这应该适合你。

"compilerOptions": {
        ....
        "rootDir": "src",
        "baseUrl": ".",
        "paths": {
            "src/*": ["src/*"],
            "components/*": ["src/components/*"],
        }
  },

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

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]/...";

它看起来简单，令人敬畏，更可读。