前言

在现代前端开发中，CLI（Command Line Interface）脚手架已经成为提高开发效率、规范团队协作的重要工具之一。本文将介绍如何从零开始开发一个前端 CLI 脚手架，使其能够通过命令行交互生成不同技术栈的模板代码，并预装常用的工具如 ESLint、Husky、Prettier 等，从而为项目的开发提供一致性和高质量的基础。

项目结构

首先，我们需要确定脚手架的项目结构。一个典型的结构可以包括以下目录和文件：

复制 1my-cli/
 2  ├── bin/
 3  │   └── my-cli.js  
 4  ├── templates/     
 5  ├── package.json
 6  └── ...

核心功能

1. 初始化项目

创建一个新的项目文件夹 my-cli，并在其中运行以下命令生成 package.json 文件：

复制 1npm init -y

创建 /bin/cli.js 后，修改 package.json 文件，将 my-cli 命令的触发文件指向 cli.js。

复制 1"bin": { 
 2    "my-cli": "./bin/cli.js"
 3},

在项目根目录运行以下命令把当前项目中 package.json 的 bin 字段链接到全局变量，就可以在任意文件夹中使用你的 CLI 脚手架命令了。

复制 1npm link  

添加依赖

复制 1npm install commander inquirer@^8.0.0 --save

commander ：命令行解决方案。

inquirer：用于在命令行与用户交互，注意 Inquirer v9 使用了 esm 模块，如果使用 commonjs 需要使用 v8 版本。

2. 编写 cli 入口文件

注意 #!/usr/bin/env node 标识是必须的，告诉操作系统用 node 环境执行，然后设置基本的操作命令：

复制 1#!/usr/bin/env node
 2const { Command } = require("commander");
 3const inquirer = require("inquirer");
 4const program = new Command();
 5
 6
 7const package = require("../package.json");
 8program.option("-v, --version").action(() => {
 9  console.log(`v${package.version}`);
10});
11
12
13program
14  .command("create")
15  .description("创建模版")
16  .action(async () => {
17    
18    const { projectName } = await inquirer.prompt({
19      type: "input",
20      name: "projectName",
21      message: "请输入项目名称：",
22    });
23    console.log("项目名称：", name);
24  });
25
26
27program.parse(process.argv);
28

可以看到当前的效果：

基本命令完成以后，设置模板选择，可以把模板放到 templates 文件夹里或者远程仓库，这里使用 templates 文件夹的方式，需要把 inquirer type 改为 list 类型：

复制 1program
 2  .command("create")
 3  .description("创建模版")
 4  .action(async () => {
 5    
 6    ...忽略...
 7    
 8    
 9    const { template } = await inquirer.prompt({
10      type: "list",
11      name: "template",
12      message: "请选择模版：",
13      choices: folderNames,
14    });
15   
16  });

编写获取 templates 下文件夹名字和路径的逻辑：

复制 1
 2const templatesPath = path.join(__dirname, "..", "templates"); 
 3const files = fs.readdirSync(templatesPath, { withFileTypes: true });
 4const subDirectories = files.filter((file) => file.isDirectory());
 5const folderNames = subDirectories.map((dir) => dir.name);
 6const folderPaths = subDirectories.map((dir) =>
 7  path.join(templatesPath, dir.name)
 8);

编写递归复制模板文件的逻辑：

复制 1
 2const { promisify } = require("util");
 3const copyFile = promisify(fs.copyFile); 
 4const mkdir = promisify(fs.mkdir); 
 5async function copyTemplateFiles(templatePath, targetPath) {
 6  const files = await promisify(fs.readdir)(templatePath);
 7  for (const file of files) {
 8    const sourceFilePath = path.join(templatePath, file);
 9    const targetFilePath = path.join(targetPath, file);
10    const stats = await promisify(fs.stat)(sourceFilePath);
11    if (stats.isDirectory()) {
12      await mkdir(targetFilePath);
13      await copyTemplateFiles(sourceFilePath, targetFilePath);
14    } else {
15      await copyFile(sourceFilePath, targetFilePath);
16    }
17  }
18}
19
20
21const targetPath = path.join(process.cwd(), projectName);
22await mkdir(targetPath);
23const selectedTemplateIndex = folderNames.indexOf(template);
24const selectedTemplatePath = folderPaths[selectedTemplateIndex];
25await copyTemplateFiles(selectedTemplatePath, targetPath);
26console.log("模板复制完成！");

至此，一个基本的 cli 已经完成了。

3. 优化 cli 交互

添加可以从命令行传递参数功能，并判断不传递时进行选择操作

复制 1program
 2  .command("create [projectName]") 
 3  .description("创建模版")
 4  .action(async (projectName) => {
 5    
 6    if (!projectName) {
 7      const { name } = await inquirer.prompt({
 8        type: "input",
 9        name: "projectName",
10        message: "请输入项目名称：",
11        validate: (input) => {
12          if (!input) {
13            return "项目名称不能为空";
14          }
15          return true;
16        },
17      });
18      projectName = name;
19    }
20  });

添加可查询命令

很多工具都会有 --help 指令，用于查看工具包的操作，program 提供了监听 --help 操作，在 cli.js 添加后，执行 -h 或者 --help 都会自动把当前注册的所有命令都打印到控制台。

复制 1program.on('--help', () => {})

输入 --help 或者 -h 查看效果:

添加创建同名目录时，是否覆盖的选择

可以使用 fs.existsSync 来检查目标文件夹是否已存在。如果目标文件夹存在，我们使用inquirer 来询问用户是否要覆盖。如果用户选择不覆盖，程序会输出消息并退出。如果用户选择覆盖，我们会先使用 fs.rm 删除已存在的目标文件夹，然后再创建新的目标文件夹，并进行后续操作。

复制 1const targetPath = path.join(process.cwd(), projectName);
 2
 3if (fs.existsSync(targetPath)) {
 4  const { exist } = await inquirer.prompt({
 5    type: "confirm",
 6    name: "exist",
 7    message: "目录已存在，是否覆盖？",
 8  });
 9
10exist ? await fsRm(targetPath, { recursive: true }) : process.exit(1);

添加模板创建成功后的引导提示

每种模板可能不同，可以创建配置文件保存各模板的相关信息。

复制 1console.log("模板创建成功！");
 2console.log(`\ncd ${projectName}`);
 3console.log("yarn");
 4console.log("yarn dev\n");

发布到 npm 仓库

在 package.json 定义需要发布的文件，这里需要发布 cli.js 以及模板。

复制 1"files": [
 2    "bin",
 3    "templates"
 4],

如果是私有工具需要设置私有源地址，或者配置 .npmrc 文件。

复制 1npm config set registry <私有源地址>

登录 npm 账号并发布。

复制 1npm login
 2npm publish

总结

使用 commander 可以更方便地处理命令行参数和创建交互式界面，从而开发出更加灵活和易用的前端 CLI 脚手架。通过命令行交互，生成不同技术栈的模板代码，并预装常用的工具和插件，使项目开发更加规范统一和高效。在实际开发中，你可以根据需要进一步扩展和优化这个脚手架，以满足不同项目的需求。