为“Create React App”创建的应用添加绝对路径

Question

我通过Create React App创建了一个应用程序，更具体地说，我也在使用打字稿。

我不知道如何设置绝对路径来访问我的组件、页面等。

在不同的情况下，我会用以下内容更新我的 tscongig：

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

但我不知道如何实现这一点，因为我正在使用react-scripts 任何想法？

Answer 1

创建一个 tsconfig.json 文件并添加以下代码。

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

然后您可以将组件导入为

import Header from 'components/Header';

Answer 2

如果在解决方案中创建jsconfig.json文件，您应该能够使用相同的方法，该文件支持与 tsconfig 相同的 baseUrl 和 rootPath 属性。

另一种方法是在您的解决方案中添加一个.env文件，其中包含以下行：

NODE_PATH=src/

另外，除了 env 文件之外，还将其添加到您的 jsconfig.json

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

这应该可以解决编译器能够找到绝对导入的问题，以及 linter 正确处理它们的问题。