使用create-react-app创建自定义绝对路径

Question

我使用create-react-app版本3.4.1创建了一个React项目，并且使用了typescript。 我尝试避免在项目中使用相对路径。这是我项目树的一部分：

/
|_ 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”部分）。根据我所知道的，自从react-create-app版本3以来，通过启用baseUrl属性来影响导入的根目录，解决了这个问题的部分。但是我无法找到任何可行的解决方案来从tsconfig path目录设置绝对路径。部分解决方案对我不起作用，因为我可能会从public目录导入东西。 我尝试了去年的这个解决方案，但它对我不起作用。有人设法让这个或其他解决方案工作吗？

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

- barshopen

Answer 1

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

const path = require('path')

module.exports = {
  webpack: {
    alias: {
      src: path.resolve(__dirname, './src/')
    }
  }
}

- Chris Nguyen