self_cli_520最全易懂脚手架cli实现

该脚手架基于commander、download-git-repo等npm实现自定义脚手架。

主要涉及的依赖

• commander 命令行解析
• download-git-repo 下载项目
• ora 加载loading
• chalk 文本样式
• inquirer 获取命令行交互
• handleBars 编译文件包

视频了解

初识self_cli_520脚手架 | 脚手架涉及到的包说明 | 编写脚手架

实现功能（命令）

• self_cli_520 -h | --help 查看帮助
• self_cli_520 -V | --version 查看版本号
• self_cli_520 list 查看所有模版
• self_cli_520 init 初始化项目

安装步骤

npm install self_cli_520

效果

1. self_cli_520 --version 2. self_cli_520 list 3. self_cli_520 --help 4. self_cli_520 init my_template

代码实现

以下全部代码

// 命令行解析
let program = require('commander');
// 下载项目
let download = require('download-git-repo')
// 加载loading
let ora = require('ora')
// 文本样式
let chalk = require('chalk')
// 获取命令行交互
let inquirer = require('inquirer')
// 编译文件包
let handleBars = require('handlebars')
// 操作文件包
let fs = require('fs')
let spinner = ora()

// 获取cli版本号
let {version} = require('./package.json')
program
    .version(version)

// 脚手架对应的模版
let templates = [
  {key: '可视化后台系统前端', value: 'http://github.com:FrontWalker2000/self-vue-sys#master'},
  {key: '可视化后台系统后端', value: 'http://github.com:FrontWalker2000/node-sys#master'},
  {key: '自定义函数库/插件', value: 'http://github.com:FrontWalker2000/self-function#master'},
]

// 选择项目模板下载
let selectTemplate = async (templateName) => {
  let res = await inquirer.prompt([
    {
      type: 'list',
      name: 'choice',
      message: '请选择需要初始化的项目:',
      default: 'http://github.com:FrontWalker2000/self-vue-sys#master',
      choices: templates
    }
  ])
  // 获取用户选择的模板
  let {choice} = res
  // loading状态
  spinner.start('正在拉取项目模板')
  downloadTemplate(choice, templateName)
}
// 下载模板
let downloadTemplate = (url, project) => {
  download(url, project, {clone: true}, async (err) => {
    if (err) {
      spinner.fail()
      return console.log(err)
    }
    spinner.succeed('模版下载成功，等待项目初始化！')
    // 初始化package.json命令行交互my
    let answers = await inquirer.prompt([
      {
        type: 'input',
        message: '请设置项目名称:',
        name: 'name',
        default: "self-vue-sys" // 默认值
      },
      {
        type: 'input',
        message: '请设置项目作者:',
        name: 'author',
        default: "yangjialin" // 默认值
      },
      {
        type: 'input',
        message: '请设置项目描述:',
        name: 'description',
        default: "vue simple of sys" // 默认值
      },
      {
        type: 'confirm',
        message: '请设置项目是否私有:',
        name: 'private',
        default: true // 默认值
      }
    ])
    const path = `${project}/package.json`
    // 读取package.json
    let packCont = fs.readFileSync(path, "utf8")
    let compileCont = handleBars.compile(packCont)(answers)
    // 重新写入
    fs.writeFileSync(path, compileCont)
    spinner.succeed(chalk.green('初始化模版完成，感谢一路奋斗的你！'))
  })
}

// 初始化命令行（self_cli_520 init my_template）
program
    .command('init <project>')
    .description('选择项目模版')
    .action((project) => {
      // 下载模版
      selectTemplate(project)
    })

// 初始化命令行（self_cli_520 init my_template）
program
    .command('list')
    .description('查看所有的可用模版')
    .action(() => {
      for (let key in templates) {
        console.log(templates[key])
      }
    })

program
    .command('*')
    .description('找不到相应的命令')
    .action(() => {
      spinner.fail(chalk.red('找不到相应的命令！'))
    })
// 解析命令行
program.parse(process.argv)

发布到npm

 - npm login 登录
 - username 输入用户名
 - password 输入密码
 - npm publish 发布

注意事项：发布前包名，版本号都要注意下。

github地址

地址： self_cli_520脚手架实现

写在最后

没什么难度，最多的还是多看，多涉及。