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

九、制作 Commands 四，可选 options

引言

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

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

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

可选 options

上一节，我们把相关的 options 的坑踩一踩，让大家知道下，其实还有很多另类的写法，不规范，或者说不正确的写法

这一节，将真正处理 在 Commands 中，进行可选参数 options 的使用

首先还是在我们的 lib\core\commands.js 文件下，来修改我们的 create 方法

const create = (program) => {
  program
    .command('create <app-name>')
    .description('create a new project powered by wzms-cli')
    .option('-d, --default','Skip prompts and use default preset')
    .action((name,options) => {
      console.log(name,options)
    })
}

可以看到我们是添加了一个 option ，其实这才是添加 options 的正确方法，通过 commander 这个库

这里我们添加了 -d 的属性，其实为 --default 默认的意思

在控制台先看下是否添加成功

wzms-cli create --help

vue create --help

从上图，可以看到我们成功的添加了 options 可选参数，并且不会再像上一节一样，会多出来一个 [options] 这个情况，显得很突兀。

下面我们再继续测试下，查看我们的 option 是否可以使用

wzms-cli create aaa bbb

wzms-cli create aaa -d

可以成功的使用，但是也从上图可以看到，有两个关键点

• 我们的 option 位置，它是不会关心的，是在中间，还是在结尾，都可以获取到

• 它还会获取到我们的 option 值，并放到对象中.

  • -d 的值， 即为 default 的值，并且为 true

并且如果是多个参数，它也只会获取到，我们所配置的 option，即 -d 其他的它都不会管

wzms-cli create aaa bbb ccc
 
wzms-cli create aaa bbb -d ccc

总结

学习了如何实现在 Commands 中，来使用正确的 option 操作