4

我使用create-react-appversion创建了一个带有 typescript 的 React 项目3.4.1。我试图避免在我的项目中使用相对路径。这是我的项目树的一部分：

/
|_ public
|_ tests
|_ src
  |____ Scenarios
  |____ Components
        |____c

我基本上想要的是能够做类似的事情import '@components/c'。我试图将此部分添加到我的tsconfig.json文件中：

{

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

但是每次我使用yarn start我的 tsconfig 启动我的应用程序时都会删除我的这部分代码（除了我的“baseUrl”部分之外的所有内容）。据我所知，自第 3 版以来，通过启用属性来影响导入的根目录，部分react-create-app解决了这个问题。但是我在任何地方都找不到从 tsconfig目录设置绝对路径的可行解决方案。部分解决方案对我不起作用，因为我可能要从公共目录导入东西。baseUrlpath

我确实从去年开始尝试过这个解决方案，但它对我不起作用。有没有人设法让这个或任何其他解决方案工作？

理想情况下，该解决方案将使我仍然可以使用 create-react-app 而不是使用其他包，但当然任何解决方案都可以。

4

1 回答 1

0

您可以通过添加 tsconfig.extends.json 并使用 craco 或任何库来自定义 webpack 来使用您的解决方案。这是我的 craco.config.js：

const path = require('path')

module.exports = {
  webpack: {
    alias: {
      src: path.resolve(__dirname, './src/')
    }
  }
}
于 2021-11-20T16:16:00.820 回答