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

你可能会注意到的唯一一件事是，智能感知在当前的最新版本中不起作用，所以我建议在导入/导出文件时遵循索引约定。

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

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

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

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

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

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

看起来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/*" ]
        }
    },
}

使用这个检出编译器操作

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

“baseUrl " src "

它工作得很好。因此，为项目添加基本目录。

2021年解决方案。

注意:CRA。最初，使用第三方库或为alias弹出应用程序的想法对我来说似乎很疯狂。然而，经过8个小时的搜索(并尝试了带有eject的变体)，结果发现这个选项是最不痛苦的。

步骤1。

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

步骤2。 在你的项目根目录下创建config-override .js文件，并填充如下内容:

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

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

步骤3。修复你的包裹。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声明模块@constants;

仅此而已。现在你可以像往常一样继续使用yarn或npm start/build/test命令。

完整版本的文档。

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

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

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

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

不要忘记在修改tsconfig.json后重新启动您的终端