3

我制作了 CRA 项目，--typescript并尝试将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 错误

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 中的文件结构吗？

4

0 回答 0