前言

在开发过程中，有许多可以提升开发效率的方式。从宏观层面来看，可以使用微前端来搭建项目框架；从中观角度来看，可以使用第三方包来开发功能；从微观角度来看，可以使用自定义组件或hooks来复用代码逻辑。除此之外，我们还可以进行更细微的优化，例如使用脚手架命令行生成自定义模板文件，减少重复编写代码的工作。

1. 创建项目

1. 新建项目目录 my-node-cli，并运行

npm init -y

2. 新建bin/index.js

#!/usr/bin/env node

console.log('hello world')

#号的内容是为了告诉操作系统使用系统中可执行路径下的Node.js来执行该脚本文件

3. 定义在全局安装时可执行的命令

修改package.json，新增以下内容：

"bin": {
    "my-node-cli": "./bin/index.js"
  },

4. npm link 软链接，用于本地调试

在终端中运行npm link，用于本地调试

在任意终端路径中运行my-node-cli，将打印“hello world”。

2. 创建脚手架启动命令

1. 安装依赖

yarn add commander@^12.1.0

commander 是一个 Node.js 库，主要用于构建命令行界面（CLI）应用程序，允许开发者定义多层命令结构

2. 创建命令

修改bin/index.js

#! /usr/bin/env node

const { Command } = require("commander");
const program = new Command();

program
  // 定义命令和参数
  .command("create <app-name>")
  .description("create a new project")
  // -f or --force 为强制创建，如果创建的目录存在则直接覆盖
  .option("-f, --force", "overwrite target directory if it exist")
  .action((name, options) => {
    // 打印执行结果
    console.log("name:", name, "options:", options);
  });

program
  // 配置版本号信息
  .version(`v${require("../package.json").version}`)
  .usage("<command> [option]");

// 解析用户执行命令传入参数
program.parse(process.argv);

在命令行输入my-node-cli，检查一下命令是否创建成功，执行结果为：

PS D:\> my-node-cli
Usage: index <command> [option]

Options:
  -V, --version                output the version number
  -h, --help                   display help for command

Commands:
  create [options] <app-name>  create a new project
  help [command]               display help for command

我们可以看到 Commands 下面已经有了 create [options] <app-name>，接着执行以下命令查看输出结果

PS D:\> my-node-cli create my-app
name: my-app options: {}
PS D:\> my-node-cli create my-app -f
name: my-app options: { force: true }
PS D:\> my-node-cli create my-app --force
name: my-app options: { force: true }

3. 执行命令

1. 安装依赖

yarn add fs-extra

Node.js内置的fs模块，复制文件需使用递归，并且还需判断是文件夹还是文件，处理起来比较麻烦。

fs-extra 是一个 Node.js 扩展包，它建立在 Node.js 内置的 fs (文件系统) 模块之上，提供了更为丰富和方便的文件及目录操作功能。

2. 创建lib/create.js

// lib/create.js

const path = require('path')
const fs = require('fs-extra')

module.exports = async function (name, options) {

  // 当前命令行选择的目录
  const cwd  = process.cwd();
  // 需要创建的目录地址
  const targetAir  = path.join(cwd, name)

  // 目录是否已经存在？
  if (fs.existsSync(targetAir)) {

    // 是否为强制创建？
    if (options.force) {
      await fs.remove(targetAir) //强制创建则先删除旧文件
    } else {
      // TODO：询问用户是否确定要覆盖
    }
  }
}

3. 引入create文件

修改bin/index.js

//...
program
  .command('create <app-name>')
  .description('create a new project')
  .option('-f, --force', 'overwrite target directory if it exist') 
  .action((name, options) => {
    // 在 create.js 中执行创建任务
    require('../lib/create.js')(name, options)
  })

3. 可视化交互

1. 询问是否覆盖已存在的目录

1. 安装依赖

yarn add inquirer@8.2.5

inquirer专为构建交互式命令行界面而设计，使命令行工具能够以一种用户友好、对话式的方式提问并接收用户的输入。

2. 修改lib/create.js

// lib/create.js

const path = require("path");

// fs-extra 是对 fs 模块的扩展，支持 promise 语法
const fs = require("fs-extra");
const inquirer = require("inquirer");
const ejs = require('ejs');

module.exports = async function (name, options) {
  // 执行创建命令

  // 当前命令行选择的目录
  const cwd = process.cwd();
  // 需要创建的目录地址
  const targetAir = path.join(cwd, name);

  // 目录已经存在
  if (fs.existsSync(targetAir)) {
    // 是否为强制创建？
    if (options.force) {
      await fs.remove(targetAir);
    } else {
      // 询问用户是否确定要覆盖
      let { action } = await inquirer.prompt([
        {
          name: "action",
          type: "list",
          message: "Target directory already exists Pick an action:",
          choices: [
            {
              name: "Overwrite",
              value: "overwrite",
            },
            {
              name: "Cancel",
              value: false,
            },
          ],
        },
      ]);

      if (!action) {
        return;
      } else if (action === "overwrite") {
        // 移除已存在的目录
        console.log(`\r\nRemoving...`);
        await fs.remove(targetAir);
      }
    }
  }

  //创建文件夹
  fs.mkdirsSync(targetAir)
};

2. 创建模板

1. 新建lib/share.js

share.js中存放一些公共方法

//首字母转大写
function capitalizeFirstLetter(str) {
  if (!str || str.length === 0) return str; // 处理空字符串的情况
  return str.charAt(0).toUpperCase() + str.slice(1);
}

module.exports = {
  capitalizeFirstLetter,
};

2. 安装依赖

yarn add ejs

ejs是一个简单的模板引擎，它允许你将JavaScript代码嵌入到HTML模板中，从而实现动态内容生成

3. 新建lib/template/index.ejs，创建模板

import {memo} from 'react';

const <%=componentName %> = ()=>{
  return <></>
}

export default memo(Index)

4. 新建lib/template.js

template.js中存放一些创建模板的方法

const path = require("path");
const fs = require("fs-extra");

const ejs = require("ejs");
const share = require("./share");

const createComponent = async (name, targetAir) => {
  const html = await ejs.renderFile(
    path.resolve(__dirname, "template/index.ejs"),
    { componentName: share.capitalizeFirstLetter(name) },
    { async: true }
  );
  fs.writeFileSync(path.join(targetAir, "/index.tsx"), html);
};

module.exports = {
  createComponent,
};

5. 修改lib/create.js，在create中引用

const template = require("./template");

module.exports = async function (name, options) {

  //...
  
  //创建文件夹
  fs.mkdirsSync(targetAir);

  template.createComponent(name, targetAir);
};

6. 运行my-node-cli create home，可查看效果

这是创建一个tsx文件的示例，vue可参照思路，创建类似的模板文件

4. 发布项目

1. 在 git 上建好仓库

2. 完善 package.json 中的配置

{
    "name": "my-node-cli",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "bin": {
      "my-node-cli": "./bin/index.js"
    },
    "files": [
      "bin",
      "lib"
    ],
    "description": "",
    "dependencies": {
      "axios": "^1.7.2",
      "chalk": "^4.1.0",
      "commander": "^12.1.0",
      "download-git-repo": "^3.0.2",
      "figlet": "^1.7.0",
      "fs-extra": "^11.2.0",
      "inquirer": "8.2.5",
      "ora": "^5.1.0",
      "util": "^0.12.5"
    }
  }

1. 使用npm publish进行发布

结尾

本篇文章主要是提供了一个创建模板文件的思路，具体的实现可根据业务来。如果有更好的建议，欢迎在评论区留言！！！