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配置”部分对我不起作用。在构建项目时仍然存在“不支持别名导入”的错误。所以我用了一个更简单的方法。幸运的是，它起作用了。

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

这可以在您的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项目如下:

“baseUrl " src "

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

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

这对我来说很管用:

 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'