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

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

TypeScript 2.0中的高级路径解析

如果你使用的是路径，在使用tsc将typescript编译成纯javascript后，你需要将绝对路径改回相对路径才能工作。

目前最流行的解决方案是tsconfig-paths。

我试过了，但对于我复杂的设置，它不适合我。 此外，它在运行时解析路径，这意味着包大小和解析性能方面的开销。

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

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

这个项目非常年轻，所以如果你的设置非常复杂，可能会有一些问题。 它完美地适用于我的设置，尽管我的设置相当复杂。

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

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

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