/只从根目录开始，为了获得相对路径，我们应该使用./或../

对于组件库

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

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

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

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

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

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

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

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

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

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

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

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

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

如果你正在寻找用@引用根文件夹的最简单的例子，这将是它:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"]
    }
  }
}
// Example usage: import * as logUtils from '@/utils/logUtils';

或者如果你甚至没有src文件夹，或者想要显式地将它包含在导入中，这也可以工作:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["*"]
    }
  }
}
// Example usage: import * as logUtils from '@/src/utils/logUtils';