点亮开发日常，编写零配置的可爱CLI工具**

2023-12-09 08:57:51

****

文章正文：

时光荏苒，我们在上篇博文《如何开发一个可爱的CLI（一）》中，共同迈出了开发一个简单脚手架工具的第一步。而在这篇文章中，我们将继续向前迈进，探讨如何基于webpack编写一个 “零配置” 的命令行工具（暂且命名为lovely-cli.）。我们将会实现一系列有用的功能，点亮你的开发日常。

构建概述：

开发环境搭建：
- 安装Node.js和npm
- 初始化一个新的Node.js项目
- 安装webpack和必要的插件
脚本结构设置：
- 创建package.json文件
- 定义脚本命令
编写核心逻辑：
- 编写一个创建新项目的函数
- 添加对命令行参数的解析
用户交互优化：
- 使用inquirer.js进行用户交互
- 询问项目名称、等信息
脚手架生成：
- 使用ejs模板引擎生成样板文件
- 将文件写入指定目录
测试与调试：
- 运行测试用例
- 使用调试工具检查程序运行情况

具体步骤：

1. 开发环境搭建：

安装Node.js和npm（详细步骤请查阅Node.js官方文档）
在命令行中输入以下命令初始化一个新的Node.js项目：

mkdir lovely-cli
cd lovely-cli
npm init -y

安装webpack和必要的插件：

npm install --save-dev webpack webpack-cli

2. 脚本结构设置：

创建package.json文件并添加以下内容：

{
  "name": "lovely-cli",
  "version": "1.0.0",
  "description": "A zero-configuration command-line tool",
  "scripts": {
    "start": "webpack-dev-server --config webpack.config.js",
    "build": "webpack --config webpack.config.js"
  }
}

3. 编写核心逻辑：

在src目录下创建一个index.js文件并添加以下内容：

const fs = require('fs');
const inquirer = require('inquirer');
const ejs = require('ejs');

const createProject = (projectName, projectDescription) => {
  const templatePath = 'templates/project-template';
  const outputPath = `projects/${projectName}`;

  fs.mkdirSync(outputPath);

  const templateFiles = fs.readdirSync(templatePath);
  templateFiles.forEach(file => {
    const template = fs.readFileSync(`${templatePath}/${file}`, 'utf-8');
    const outputFile = ejs.render(template, {
      projectName,
      projectDescription
    });

    fs.writeFileSync(`${outputPath}/${file}`, outputFile);
  });
};

const parseArgs = () => {
  const args = process.argv.slice(2);

  if (args.length < 2) {
    console.error('Usage: lovely-cli <project-name> <project-description>');
    process.exit(1);
  }

  return {
    projectName: args[0],
    projectDescription: args.slice(1).join(' ')
  };
};

const main = async () => {
  const { projectName, projectDescription } = parseArgs();
  await inquirer
    .prompt([
      {
        type: 'confirm',
        name: 'confirmation',
        message: `Are you sure you want to create a new project named ${projectName}?`
      }
    ])
    .then(answers => {
      if (answers.confirmation) {
        createProject(projectName, projectDescription);
        console.log(`Project ${projectName} created successfully!`);
      } else {
        console.log('Project creation cancelled.');
      }
    });
};

main();

4. 用户交互优化：

在index.js文件中添加以下内容：

const inquirer = require('inquirer');

const askProjectName = () => {
  return inquirer.prompt([
    {
      type: 'input',
      name: 'projectName',
      message: 'What is the name of your project?'
    }
  ]);
};

const askProjectDescription = () => {
  return inquirer.prompt([
    {
      type: 'input',
      name: 'projectDescription',
      message: 'Give a brief description of your project:'
    }
  ]);
};

并将main()函数修改为：

const main = async () => {
  const projectName = await askProjectName();
  const projectDescription = await askProjectDescription();

  await inquirer
    .prompt([
      {
        type: 'confirm',
        name: 'confirmation',
        message: `Are you sure you want to create a new project named ${projectName.projectName}?`
      }
    ])
    .then(answers => {
      if (answers.confirmation) {
        createProject(projectName.projectName, projectDescription.projectDescription);
        console.log(`Project ${projectName.projectName} created successfully!`);
      } else {
        console.log('Project creation cancelled.');
      }
    });
};