如何在Node.js中打造类似create-svelte-app的交互式CLI界面？

要复刻create-svelte-app那样的引导式交互CLI，核心是用几个成熟的Node.js工具组合实现，下面是具体步骤和代码示例：

核心依赖选择 #

• inquirer：负责提供各种交互式提问（单选、多选、输入、确认等），是实现引导流程的核心
• chalk：给CLI输出添加颜色区分，提升视觉体验
• ora：显示加载动画，在执行耗时操作（如文件复制、依赖安装）时反馈状态
• fs-extra：增强版文件操作工具，方便复制模板目录、创建文件等

先安装依赖：

npm install inquirer chalk ora fs-extra

核心交互逻辑实现 #

创建入口文件index.js，实现类似create-svelte的引导流程：

#!/usr/bin/env node
const inquirer = require('inquirer');
const chalk = require('chalk');
const ora = require('ora');
const fs = require('fs-extra');
const path = require('path');

// 定义交互问题
const questions = [
  {
    type: 'input',
    name: 'projectName',
    message: '请输入项目名称:',
    default: 'my-svelte-app'
  },
  {
    type: 'list',
    name: 'template',
    message: '选择项目模板:',
    choices: [
      { name: '基础模板', value: 'base' },
      { name: 'TypeScript模板', value: 'ts' },
      { name: '带ESLint的模板', value: 'eslint' }
    ]
  },
  {
    type: 'confirm',
    name: 'installDeps',
    message: '是否自动安装依赖?',
    default: true
  }
];

// 执行交互流程
inquirer.prompt(questions).then(async answers => {
  const { projectName, template, installDeps } = answers;
  const projectDir = path.resolve(process.cwd(), projectName);

  // 显示加载动画
  const spinner = ora(chalk.blue('正在初始化项目...')).start();

  try {
    // 复制对应模板文件
    const templateDir = path.resolve(__dirname, 'templates', template);
    await fs.copy(templateDir, projectDir);

    // 修改package.json的项目名称
    const pkgPath = path.join(projectDir, 'package.json');
    const pkg = await fs.readJson(pkgPath);
    pkg.name = projectName;
    await fs.writeJson(pkgPath, pkg, { spaces: 2 });

    spinner.succeed(chalk.green('项目模板初始化完成!'));

    // 自动安装依赖
    if (installDeps) {
      spinner.text = chalk.blue('正在安装依赖...');
      spinner.start();
      // 执行npm install命令
      const { execSync } = require('child_process');
      execSync('npm install', { cwd: projectDir, stdio: 'inherit' });
      spinner.succeed(chalk.green('依赖安装完成!'));
    }

    console.log(chalk.cyan(`\n项目创建完成! 执行以下命令启动:`));
    console.log(chalk.cyan(`cd ${projectName}`));
    console.log(chalk.cyan(`npm run dev`));
  } catch (err) {
    spinner.fail(chalk.red(`初始化失败: ${err.message}`));
    process.exit(1);
  }
});

补充优化点 #

1. 自定义命令：配合commander库，给CLI添加自定义命令和参数，比如支持create-my-app init这样的调用方式
2. 模板管理：在项目中创建templates目录，存放不同类型的模板文件，方便维护和扩展
3. 错误处理：增加对项目目录已存在、文件读写失败等场景的捕获和友好提示
4. 进度反馈：对于耗时较长的操作，用ora实时更新状态，避免用户误以为程序卡死
5. 全局安装：在package.json中配置bin字段，将CLI注册为全局命令，方便用户直接调用

注：你提到的演示效果中，CLI会通过分步提问收集配置，实时反馈操作状态，最终自动完成项目初始化，以上代码即可实现类似的核心流程。

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