node搭建cli脚手架工具-发布到NPM

如果你还在手动复制模板代码，这篇文章值得一看，学到就是赚到

如图所示，使用自定义的指令：hs-cli create <project-name> 就可以下载模板代码

1、准备模板代码

在github上初始化仓库，把你的模板代码放上去，我这边的地址是：🔗

2、初始化

初始化项目 npm init

生成了package.json文件

下载插件 npm install chalk commander download-git-repo fs-extra inquirer ora

如果后续执行代码报错：Error [ERR_REQUIRE_ESM]: require() of ES Module ，需要把插件版本降级。推荐：inquirer：8.0.0 、 ora：4.0.0 、 chalk：4.0.0

新增指令："hs-cli": "bin/hscli.js"

3、指令编写

新增 bin/hscli.js 文件

#! /usr/bin/env node  // 页面头都需要增加该注释
console.log('脚手架HS-CLI');

4、指令生效

本地关联指令：npm link . 输入：hs-cli 执行了 hscli.js

5、hs-cli create <project-name>

//  hscli.js 

#! /usr/bin/env node 
const program = require("commander");
const create = require('../lib/create');
// 定义指令
program
  .version('0.0.1')
  .usage('<command> [options]')
  .command(`create <app-name>`)
  .action((name, cmd) => {
    // 回调函数
    console.log('脚手架HS-CLI');
    create(name,cmd);
  })
program
  .on('--help',()=>{
    console.log('');
    console.log(`Run ${chalk.cyan(' hscli <command> --help')} show details `);
    console.log('');
  }) 
// 解析命令行参数
program.parse(process.argv);

新增 lib/create.js 文件

//  create.js

const chalk = require('chalk')
const path = require('path')
const ora = require('ora')
const fs = require('fs-extra')
const inquirer = require('inquirer')
const download = require('download-git-repo')

// 下载模板文件
function downloadtemp (projectName) {
  url = 'https://github.com/github-gmm/hs-template.git';
  console.log(chalk.white('\n Start generating... \n'))
  // 出现加载图标
  const spinner = ora("下载中...");
  spinner.start();
  download(`direct:${url}`, `./${projectName}`, { clone: true }, (err) => {
    if (err) {
      spinner.fail()
      console.log(chalk.red(`Generation failed. ${err}`))
      return
    }
    // 结束加载图标
    spinner.succeed()
    console.log(`\r\n ${chalk.green('创建成功！')}`);
    console.log('\n To get started')
    console.log(`\n    cd ${projectName} \n`)
  })
}
module.exports = async function (projectName, option) { 
  //  创建项目
  //  命名重复
  // 1. 获取当前执行目录
  const cwd = process.cwd(); 
  const targetDir = path.join(cwd, projectName)
  if (fs.existsSync(targetDir)) {
    if (option.force) {
      // 强制创建,加入 -f 命令后如果文件存在重名会强制移除上一个文件，新建一个文件
      await fs.remove(targetDir);
    } else {
        // 这个是用户没有加入 -f强制命令进行是否覆盖处理 提示用户是否确定要覆盖,用户选项提示
      let { action } = await inquirer.prompt([
        {
          name: 'action',
          type: 'list',
          massage: '当前文件名重复是否覆盖?',
          choices: [
            { name: '覆盖', value: 'overwrite' },
            { name: '取消', value: false }
          ]
        }
      ])
      // 如果用户不覆盖，直接取消
      if (!action) {
        console.log(`\r\n 取消构建`);
        return 
      } else if (action == 'overwrite') {
        // 如果要覆盖直接将之前文件进行移除 然后覆盖
        console.log(`\r\n 正在移除...`);
        await fs.remove(targetDir);
      } 
    }
  }
  downloadtemp(projectName); 
}

查看效果

6、NPM发布

打开npm网站，注册账号🔗

控制台输入：npm login

发布：npm publish

发布到 npm 的脚手架名称就是 package.json 的 name 值，ps：发布名称不能重复

7、CLI验证

解绑本地指令： npm unlink .

安装全局脚手架：npm install hs-cli -g

执行：hs-cli -h