Question

我使用--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

您对此有任何解决方案吗？我一直都无法从Index.tsx文件夹导入App.tsx和docs/。我也曾尝试在Webpack配置中的entry: "./docs/index.tsx",中设置入口文件config-overrides.js，但是最好的效果是加载了Index.tsx，但是App.tsx显示了一个错误。

App.tsx error

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;
  }
};

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

还有其他方法可以更改CRA中的文件结构吗？

如何使用Typescript

0 个答案: