如何使用create-react-cli创建组件时不单独生成组件文件夹

云原生阿岚

2026-8-17

解决Generate React CLI直接在components目录生成单文件组件的方法

生成CLI配置文件
执行命令初始化配置文件：
```
npx generate-react-cli init
```
项目根目录会生成generate-react-cli.json配置文件。

修改配置文件
打开generate-react-cli.json，调整配置项如下：

{
  "usesTypeScript": false, // 根据项目技术栈调整，true则生成ts/tsx文件
  "usesCssModule": false,
  "cssPreprocessor": "css",
  "testLibrary": "Testing Library",
  "component": {
    "default": {
      "path": "src/Components", // 指定组件存放目录
      "withStyle": false, // 关闭样式文件生成
      "withTest": false, // 关闭测试文件生成
      "withStory": false, // 关闭Storybook文件生成
      "withLazy": false,
      "withFolder": false // 核心配置：关闭组件独立文件夹，直接生成单文件
    }
  }
}

创建组件
执行创建命令生成组件，比如创建Button组件：
```
npx generate-react-cli component Button
```
组件文件会直接生成在src/Components目录下，导入路径可简化为import Button from 'src/Components/Button'。