『手撕Vue-CLI』添加自定义指令

vue,cli · 浏览次数 : 0

小编点评

**添加 create 指令的步骤** 1. 在 `/bin/index.js` 中引入 `commander` 库: ```js const commander = require('commander'); ``` 2. 在 `/bin/index.js` 中添加 `create` 指令: ```js const program = commander.create({ name: 'nue-cli', version: '1.0.0', description: 'Create a new Vue project', entry: './src/index.js', // Add create command command: ['create'], alias: ['c'], description: 'Create a new project powered by Vue CLI service', example: 'nue-cli create <app-name>', }); ``` 3. 在 `/bin/index.js` 中添加 `create` 指令的示例使用说明: ```js program.on('--help', () => { console.log(''); console.log('Examples:'); console.log(' nue create <app-name> '); }); ``` 4. 在控制台在输入 `nue --help` 时可看到自定义的 `create` 指令的使用说明。

正文

前言

经上篇『手撕Vue-CLI』添加帮助和版本号的介绍之后,已经可以在控制台中输入 nue --help 来查看帮助信息了,但是在帮助信息中只有 --version--help 这两个指令,而 vue-cli 中还有很多指令,例如 createservebuild 等等,所以本章将继续添加自定义指令,例如 create 指令。

添加 create 指令

在 vue-cli 中,create 指令是用来创建一个新的项目的,我实现的 nue --help 的帮助信息中只有 --version--help 这两个指令,所以当用户使用我的 nue-cli 时,并不知道有 create 这个指令,所以接下来要完成的就是添加 create 指令到 nue-cli --help 的帮助信息中。

添加 create 指令到 --help 的帮助信息中

是否大家还记得在上一篇『手撕Vue-CLI』添加帮助和版本号中,我引入了 commander 这个库,这个库是用来处理命令行参数的,所以我们可以使用这个库来添加 create 指令到 nue-cli --help 的帮助信息中。

首先我们需要在 /bin/index.js 中引入 commander 这个库,这一步上一篇已经完成了,所以这里就不再赘述。

然后需要在 /bin/index.js 中添加 create 指令,这里我们可以使用 commandercommand 方法来添加指令,如下:

command 方法接收一个参数,第一个参数是指令的名称,调用方式是通过 commander 实例调用 command 方法,如下:

+ program
+   .command('create');

这样我们就添加了 create 指令:

这里只是单单的添加了 create 指令,但是并没有添加 create 指令的描述信息,告诉一下用户这个指令是干嘛干嘛用的之类的话术,所以我们需要添加 create 指令的描述信息,如下:

那么如何添加 create 指令的描述信息呢?紧接着上面的代码,在 command 方法后面添加 description 方法链式调用, description 方法的作用就是添加指令的描述信息,接收一个参数,就是指令的描述信息,如下:

 program
   .command('create')
+  .description('create a new project powered by nue-cli-service');

好了指令的描述设置好了,还可以设置下 alias 别名,就是可以通过简写的方式进行使用指令,继续链式调用 alias 方法,alias 方法的作用就是设置指令的别名,接收一个参数,就是指令的别名,如下:

 program
   .command('create')
+  .alias('c')
   .description('create a new project powered by nue-cli-service');

还可以设置 action 方法,继续链式调用 action 方法,action 方法的作用就是设置指令的回调函数,当用户输入了这个指令的时候,就会执行这个回调函数,如下:

 program
   .command('create')
   .alias('c')
   .description('create a new project powered by nue-cli-service')
+  .action(() => {
+    console.log('创建一个 Nue 项目');
+  });

这样我们就添加了 create 指令,并且添加了 create 指令的描述信息,别名,回调函数,现在如果用户使用 nue --help 就可以看到 create 指令了:

总结

其实就几点,介绍了一下 commandercommanddescriptionaliasaction 方法,这几个方法是用来添加指令的,设置指令的描述信息,别名,回调函数的,这样就可以添加自定义指令了。

有个注意点大家需要注意一下,就是 program.version(version).parse(process.argv); 这行代码要放在所有指令的后面,不然指令就不会生效了。

指令添加完成了,但是呢有一个问题,因为我本人是比较熟悉 vue-cli 所以知道有 create 并且知道怎么用,那么如果是一个新手呢?如果他知道了有 create 但是不知道怎么用呢?所以还需要添加 create 指令的使用示例。

添加 create 指令的使用示例

这个我相信对于新手又或者说有经验的人来说使用示例是啥就不用多说了,就是告诉用户怎么用这个指令。

那么如何添加 create 指令的使用示例呢?紧接着上面的代码,其实在 commander 中也有对应的解决方案,就是通过 commander.on 进行监听,监听 --help 事件,然后在监听事件中添加 create 指令的使用示例,如下:

+ program.on('--help', () => {
+   console.log('');
+   console.log('Examples:');
+   console.log('  nue create <app-name>  ');
+ });

封装公共解决方案

为啥我还要起一个标题来说这个呢?我现在只有一个 create 自定义指令,那么在后面还会有很多自定义指令,那么每次都要写一遍 commanddescriptionaliasactionon 这些方法,那么这样就会显得很冗余,所以可以封装一个公共解决方案,这样就可以减少代码量,提高代码的可维护性。

首先定义一个 commandMap 对象,用来存放指令的信息,可以将后续需要使用的指令都放里面进行存放起来,如下:

+ const commandMap = {
+   create: {
+     alias: 'c',
+     description: 'create a new project powered by vue-cli-service',
+     example: 'nue-cli create <app-name>',
+   },
+   add: {
+     alias: 'a',
+     description: 'install a plugin and invoke its generator in an already created project',
+     example: 'nue-cli add [options] <plugin> [pluginOptions]',
+   },
+   '*': {
+     alias: '',
+     description: 'command not found',
+     example: '',
+   },
+ };

我这里定义了 createadd* 三个指令,* 是用来处理用户输入的指令不存在的情况,这里只是定义了三个指令,后续还可以继续添加。

commandMap 对象的取值就是指令的名称,然后值是一个对象,这个对象包含了指令的别名,描述信息,使用示例,字段,后续的改进就是遍历 commandMap 对象,循环的添加指令,如下:

- program
-   .command('create')
-   .alias('c')
-   .description('create a new project powered by nue-cli-service')
-   .action(() => {
-     console.log('创建一个 Nue 项目');
-   });
+ Reflect.ownKeys(commandMap).forEach((key) => {
+   const value = commandMap[key];
+   program
+     .command(key)
+     .alias(value.alias)
+     .description(value.description)
+     .action(() => {
+       if (key === '*') {
+         console.log(value.description);
+       } else {
+         console.log(value.description);
+       }
+     });
+ });

通过 Reflect.ownKeys 方法遍历 commandMap 对象,然后通过 program.command 方法添加指令,Reflect.ownKeys 这个是 ES6 提供的一个方法,用来获取对象自身的属性键,返回一个数组,这个方法是用来替代 Object.keys 方法的,Object.keys 方法只能获取对象自身的可枚举属性键,而 Reflect.ownKeys 方法可以获取对象自身的所有属性键,包括不可枚举属性键。

什么意思呢?就是说 Reflect.ownKeys 方法可以获取对象自身的所有属性键,包括不可枚举属性键,而 Object.keys 方法只能获取对象自身的可枚举属性键,所以 Reflect.ownKeys 方法更加强大。

不可枚举又是什么意思呢?通俗易通的说就是 private 与 public 的区别,private 是不可枚举的,public 是可枚举的。

通过这么一改造之后,之前通过 command 方法添加指令的代码写法已经优化完毕了,还有一个就是添加指令所对应的使用示例,代码也需要进行优化,如下:

- program.on('--help', () => {
-   console.log('');
-   console.log('Examples:');
-   console.log('  nue create <app-name>  ');
- });
+ program.on('--help', () => {
+     console.log('Examples:');
+     Reflect.ownKeys(commandMap).forEach((key) => {
+         const value = commandMap[key];
+         console.log(`  ${value.example}`);
+     });
+ });

改写方式就是通过 Reflect.ownKeys 方法遍历 commandMap 对象,然后通过 console.log 方法输出指令的使用示例。

最后在控制台在输入 nue --help 就可以看到所自定义的指令了:

与『手撕Vue-CLI』添加自定义指令相似的内容:

『手撕Vue-CLI』添加自定义指令

前言 经上篇『手撕Vue-CLI』添加帮助和版本号的介绍之后,已经可以在控制台中输入 nue --help 来查看帮助信息了,但是在帮助信息中只有 --version,--help 这两个指令,而 vue-cli 中还有很多指令,例如 create,serve,build 等等,所以本章将继续添加自

『手撕Vue-CLI』添加自定义指令

前言 经上篇『手撕Vue-CLI』添加帮助和版本号的介绍之后,已经可以在控制台中输入 nue --help 来查看帮助信息了,但是在帮助信息中只有 --version,--help 这两个指令,而 vue-cli 中还有很多指令,例如 create,serve,build 等等,所以本章将继续添加自

『手撕Vue-CLI』处理不同指令

前言 在上一篇『手撕Vue-CLI』添加自定义指令中,已经实现了自定义指令的添加,但是指令还是比较简单的,只是简单的打印一句话,那么在实际运用场景中,可能会有更多的需求,比如可能需要在指令中传递参数,或者需要在指令中进行一些复杂的操作,那么这个时候我们就需要对指令进行处理了。 创建指令处理文件 在上

『手撕Vue-CLI』添加终端用户交互

前言 经过上一篇文章的梳理,实现了可以从 GitHub 上拉取模板项目名称,已经可以得知可使用的模板有哪些了,那么我觉得是不是要进行选择呢?所以这一篇文章就来实现终端用户交互,让用户可以自己选择想要使用的模板。 实现 在 NodeJS 当中,已经有人为我们封装好了一个库,叫做 inquirer,可以

『手撕Vue-CLI』拉取版本号

开篇 在上一篇文章中,给 nue-cli 添加了与用户终端交互的功能,这一次来实现一个拉取版本号的功能。 这个功能的背景是,有时候我们在使用脚手架的时候,不同版本的脚手架可能会有不同的功能,所以用户有可能会根据自己的需求选择不同的版本,所以这里将会实现一个根据用户选择的版本号,拉取对应的版本号的模板

『手撕Vue-CLI』添加帮助和版本号

前言 经过上一篇『手撕Vue-CLI』编码规范检查之后,手撕 Vue-CLI 已经进阶到了代码规范检查这一步,已经将基本的工程搭建好了,然后代码规范约束也已经加入了,并且将 nue-cli 指令绑定到了全局当中,可以在任何地方使用了。 正文 接下来这篇文章呢,就要来实现一下大多数的命令行工具都会有的

『手撕Vue-CLI』函数柯里化优化代码

开篇 在上一篇文章中,给 nue-cli 添加了拉取版本号的功能,这一次来优化一下代码,使用函数柯里化的方式来优化代码。 实现 函数柯里化 函数柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。 在进行改写之前,首先给大家简单介绍一下函数柯里化,写一个简单的例子来演示一下。

『手撕Vue-CLI』完善提示信息

前言 经过『手撕Vue-CLI』自动安装依赖,已经实现了自动安装依赖的功能。 然而,虽然项目已复制并安装依赖,但其提示信息并不够友好,于是我试着去运行了一下vue create,发现其提示信息是这样的: 于是我决定完善提示信息,也借此机会完善一下项目的代码,变量命名等。 完善提示信息 完善变量命名

『手撕Vue-CLI』自动安装依赖

开篇 经过『手撕Vue-CLI』拷贝模板,实现了自动下载并复制指定模板到目标目录。然而,虽然项目已复制,但其依赖并未自动安装,可能需要用户手动操作,这并不够智能。 正如前文所述,我们已经了解了业务需求和背景。那么,接下来我们将直接深入探讨核心实现细节。 自动安装依赖 在前文中,我们已经将模板文件复制

『手撕Vue-CLI』拷贝模板

开篇 经过上篇文章的介绍,实现了可以根据用户选择的模板名称加上对应的版本号,可以下载对应的模板,并且将下载之后的文件存放在用户目录下的 .nue-template文件夹中。 接下来这篇文章主要实现内容是将下载的模板文件拷贝到当前所执行命令的目录下。 拷贝模板 例如我现在在终端当中输入 nue-cli