Javascript 如何使用Typescript更改React.js的结构

我用

--typescript

创建了CRA项目，并尝试使用

react app rewired

来更改如下结构：

my-app/
├─ .gitignore
├─ node_modules/
├─ public/ ...
├─ src/
│  └─ components/
|     └─ My-Component
|        └─ Index.tsx
|        └─ Index.test.tsx
|     ...
├─ docs/
|  └─ App.tsx // and here use My-Component
|  └─ Index.tsx
├─ package.json
├─ tsconfig.json

你有什么解决办法吗？从

docs/

文件夹导入

Index.tsx

和

App.tsx

时，我总是遇到问题。我也尝试过在网页配置中设置条目文件

entry:“./docs/index.tsx”，

在

config overrides.js

中，但最好的效果是加载index.tsx，但是App.tsx显示了一个错误

必须以这种方式保留该结构，因为我想用TS将现有的旧项目转换为CRA

---

如何更改CRA中文件结构的任何其他方法？

对于对本主题感兴趣的人，我不会移动

src

文件夹，但我会为我的组件创建一个新文件夹。在src文件中，我将保留

docs

const path = require('path');
const {
    getLoader,
    injectBabelPlugin
} = require("react-app-rewired");
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
  // The Webpack config to use when compiling your react app for development or production.
  webpack: (config, env) => {
    config = {
      mode: 'development',
      entry: './docs/index.tsx',
      resolve: {
        extensions: ['.tsx', '.ts', '.js']
      },
       module: {
        rules: [
          {
            test: /\.(tsx)$/,
            exclude: /node_modules/,
            use: ['babel-loader']
          },
        ]
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: 'public/index.html'
        })
      ]

    };
    return config;
  }
};