如何定制React应用创建CLI/脚本：构建自定义Vite项目脚手架

一、核心依赖选择 #

• commander：处理命令行参数，定义CLI指令
• execa：安全执行shell命令（用于调用Vite的项目生成逻辑）
• fs-extra：增强版文件系统工具，简化文件夹创建、文件读写操作
• inquirer（可选）：实现交互式配置（比如让用户选择是否添加特定依赖、模板类型）

二、分步实现 #

1. 初始化CLI项目 #

先创建空项目并配置核心依赖：

mkdir create-my-react-app && cd create-my-react-app
npm init -y
npm install commander execa fs-extra inquirer --save

修改package.json，添加bin字段指定CLI入口文件：

{
  "name": "create-my-react-app",
  "version": "1.0.0",
  "bin": {
    "create-my-react-app": "./index.js"
  }
}

2. 编写CLI核心逻辑（index.js） #

开头添加shebang指定执行环境，然后用commander定义命令流程：

#!/usr/bin/env node
const { Command } = require('commander');
const execa = require('execa');
const fs = require('fs-extra');
const path = require('path');

const program = new Command();

program
  .name('create-my-react-app')
  .argument('<project-name>', 'Name of the React project')
  .option('-t, --ts', 'Use TypeScript template')
  .action(async (projectName, options) => {
    try {
      // 1. 调用Vite生成基础React项目
      const template = options.ts ? 'react-ts' : 'react';
      await execa('npm', ['create', 'vite@latest', projectName, '--', '--template', template]);

      const projectDir = path.resolve(process.cwd(), projectName);

      // 2. 自动安装指定依赖
      const requiredDeps = ['axios', 'react-router-dom'];
      const requiredDevDeps = ['eslint', 'prettier'];
      await execa('npm', ['install', ...requiredDeps], { cwd: projectDir });
      await execa('npm', ['install', ...requiredDevDeps, '--save-dev'], { cwd: projectDir });

      // 3. 创建自定义文件夹与文件
      const srcDir = path.join(projectDir, 'src');
      // 生成业务模块目录
      await fs.ensureDir(path.join(srcDir, 'features'));
      // 生成工具函数目录及示例文件
      await fs.ensureDir(path.join(srcDir, 'utils'));
      await fs.writeFile(
        path.join(srcDir, 'utils', 'api.js'),
        `import axios from 'axios';\n\nexport const apiClient = axios.create({ baseURL: '/api' });`
      );
      // 生成路由配置文件
      await fs.writeFile(
        path.join(srcDir, 'router.js'),
        `import { createBrowserRouter } from 'react-router-dom';\nimport Home from './pages/Home';\n\nexport const router = createBrowserRouter([\n  { path: '/', element: <Home /> }\n]);`
      );

      console.log('✅ 项目初始化完成！');
    } catch (err) {
      console.error('❌ 初始化失败：', err.message);
      process.exit(1);
    }
  });

program.parse();

3. 本地测试CLI #

先在本地链接CLI，方便直接调用：

npm link

然后执行命令测试效果：

create-my-react-app my-demo-app --ts

该命令会生成一个TypeScript版Vite React项目，自动安装指定依赖，并创建预设的文件夹和文件。

4. 进阶优化方向 #

• 交互式配置：用inquirer让用户选择是否添加特定依赖、是否生成路由/状态管理模板
• 模板复用：在CLI项目中创建templates目录，存放常用文件模板，通过fs.copy批量复制到目标项目
• 多包管理器支持：允许用户选择npm、yarn或pnpm作为依赖安装工具
• 错误处理增强：针对Vite创建失败、依赖安装失败等场景给出更精准的提示

三、发布到npm（可选） #

如果要分享给其他开发者，直接发布到npm：

npm publish

发布后用户可通过npx create-my-react-app my-app直接使用你的CLI工具。

内容的提问来源于stack exchange，提问作者user3074140