一、创建脚手架配置文件夹

• 在电脑上找一个靠谱的位置新建文件夹，文件夹名字最好与你即将发布到npm上的脚手架一致
• 新建 bin 文件夹，下面新建 index.js

#!/usr/bin/env node

const figlet = require("figlet");
console.log(`\r\n ${figlet.textSync('ra-cli', {
  font: 'Ghost',
  horizontalLayout: "default",
  verticalLayout: "default",
  width: 80,
  whitespaceBreak: true,
})}`);

const program = require("commander");
program
  .name("demo") // 这个位置 demo 放的是新建项目的命令
  .usage("[options] <command> [<args>]")
  .version(`${require("../package.json").name} ${require("../package.json").version}`)
  .command("create <project-name>")
  .action((projectName, options) => {
    require("./combination")(projectName, options);
  })

program.parse(process.argv)

• 在同路径下新建 combination.js 文件

const { promisify } = require("util");
const figlet = require("figlet");
const inquirer = require("inquirer");
const ora = require("ora")
const download = promisify(require("download-git-repo"));
const { commandSpawn } = require("./terminal");

const vueRepo = "direct:https://gitee.com/XXXXXXXXXXXX.git"; // 脚手架模板的远程仓库地址
const spinner = ora("加载中...");

const createProjectAction = async (projectName, options) => {
  await download(vueRepo, projectName, { clone: true });

  const command = process.platform === "win32" ? "npm.cmd" : "npm";
  await commandSpawn(command, ["install"], { cwd: `./${projectName}` });

  commandSpawn(command, ["run", "dev"], { cwd: `./${projectName}` });
  spinner.succeed();
};

module.exports = function (projectName, options) {
  inquirer.prompt([
    {
      name: "project",
      type: "list",
      message: "请选择模板",
      choices: [
        {
          name: "私有脚手架", // 脚手架名称
          value: 1,
          description: "私有脚手架", // 脚手架描述
          checked: true,
        }
      ]
    }
  ]).then(data => {
    spinner.start();
    createProjectAction(projectName, options)
  })
}

• 在同路径下新建 terminal.js 文件

const  { spawn } = require("child_process");

const commandSpawn = (...args) => {
    return new Promise((resolve,reject) => {
        const childProcess = spawn(...args);
        childProcess.stdout.pipe(process.stdout);
        childProcess.stderr.pipe(process.stderr);
        childProcess.on("close",() => {
            resolve();
        })
    })
}

module.exports = {
    commandSpawn
}

• 初始化npm，安装以下插件（注意版本号一致）

   "chalk": "^5.0.1",
   "commander": "^9.3.0",
   "download-git-repo": "^3.0.2",
   "figlet": "^1.5.2",
   "inquirer": "^8.0.0",
   "ora": "^5.1.2"

• 在 package.json 中添加配置如下

  "bin": {
   "demo": "bin/index.js" // 这个位置 demo 放的是新建项目的命令  bin/index.js 是入口文件路径
 },

二、创建脚手架项目远程模板

• 在 github 或者 gitee 上上传项目模板

三、发布到npm上（含更新）

• npm 注册账号
• 执行 npm login 登陆账号
• 执行 npm publish 进行发布
• 需要更新的时候

npm version patch  // 1.0.1 表示小的bug修复
npm version minor // 1.1.0 表示新增一些小功能
npm version mmajor // 2.0.0 表示大的版本或大升级
npm version preminor // 1.1.0-0 后面多了个0，表示预发布

再执行一次 npm publish 发布

四、本团队脚手架及团队规范

• 全局安装本团队脚手架 npm install haohan-vue3-template -g
• 创建项目命令为 haohan create XXX
• 团队规范在新建项目的 README.md 内具体阐述