持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第18天，点击查看活动详情

六、制作 Commands 一

引言

这里开始新的学习系列，动手搭建一个属于自己的 vue 脚手架

主要以 vue 官方的 vue cli 作为参考和学习

方便自己在后续创建 vue 项目时，不必总是复制粘贴

制作 Commands

上一节，我们学习了 如何使用 监听指令，并且使用了 --help 来举例子，写了个假的，不能执行的 Commands

所以这一节，我们真正开始制作自己的 Commands

当然，我们还是使用的是 commander 这个库，这里分主要的 三步 来进行实现

• 首先是通过 command 方法来进行创建

• 添加描述信息

• 最后是执行后的行为

这里我们在 lib\core 文件夹下，新增一个 commands.js 文件，用它来自定义制作我们的 Commands

因为这个书写，有很多的情况，这里先列举第一种方式， 最简单的情况

方式一

在刚刚创建好的 commands.js 文件中编写

const create = (program) => {
  program
    .command('create <app-name>')
    .description('create a new project powered by wzms-cli')
    .action((name) => {
      console.log(name)
    })
}

const commands = (program) => {
  create(program)
}

module.exports = {
  commands
}

这里解释下每行代码的意思

• program.command 来自定义 Commands

  • app-name 是我们的必填项，有且仅有一个

• .description 则为这个命令的描述信息

• .action 则代表执行上面的命令后，所要执行的操作，是一个回调函数，里面的参数为

  • name 则为 尖括号 里面传递的值

之后在 bin\index.js 文件中进行引入我们的 commands

const { commands } = require('../lib/core/commands')

commands(program)

在控制台进行使用 wzms-cli create aaa

可以看到我们的结果输出来了

当然我们肯定不是为了打印这个 log 信息，而是准备做东西

这个只是提示，我们成功的获取到了 我们传递的 app-name 的值

总结

这一节，学习到了 如何制作 Commands 并且用到了最简单的方式，实现了一个 Commands