将绝对路径添加到由“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 正确处理它们的问题。