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

八、制作 Commands 三

引言

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

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

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

制作 Commands

上一节，我们成功的制作了一个 Commands，并增加了 options

但是呢，其实是不完美的，这一节给出第三种方式

比较

我们先看一下，我们与 vue cli 之间的差距在哪

从上面两张图，可以看到我们的 options 放置的位置 与 vue cli 是不同的

所以再次改进一下我们的 Commands

方式三

从上面知道，我们应该将 options 放到中间的位置

在 lib\core\commands.js 文件下，修改我们的 create 方法

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

放到中间后，我们再次执行

可以看到结果让我们很意外，我们的 opitons 竟然是一个必填的参数，这是为什么呢？

我们先将问题放置在这里，一会和下面的一起进行解答

多个参数

如果 options 放在中间，那么如何实现多个参数呢

我们这里再次尝试修改 create 方法

  program
    .command('create [options...] <app-name>')

执行后会发现，报错了，如下图

汇总

到这里，我们应该就意识到了，我们不应该这样写我们的 opitons

因为正常情况下，options 是一个可选参数，但是目前是一个必填参数

而且从下图也可以看到，我们是多了一个 options，所以我们的这种写法是不对的

那肯定与我们最初的想法是不一样的，保留这个疑问，在下一节进行真正意义上的实现可选的 opitons

总结

这一节，主要是踩坑，知道 options 的这种写法是不对的，会有更好的 options 写法