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

news/2024/11/16 3:17:51/文章来源:https://www.cnblogs.com/BNTang/p/18200909

前言

经上篇『手撕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 就可以看到所自定义的指令了:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/708967.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Web入门

SQL注入 数据库基础 *关系型数据库: #Access#MSSQL -- 1433*非关系型数据库: #MySQL -- 3306#Oracle -- 1521等对MySQL数据库的操作 1.显示数据库 show databases;2.显示数据库版本 select version(); 3.使用数据库 use XXX;4.显示当前正在使用的数据库 selec…

Linux常用命令-文件目录命令

Linux常用命令-文件目录命令1.目录命令 1.1、ls命令:显示目录下的内容 基本格式 [root@localhost ~]# ls [选项] [参数是文件名或目录名]常用选项 -a:显示所有文件。 --color=when。支持颜色输出,when的值默认是always(总显示颜色),never(不显示颜色)和auto(自动)。 -d:显…

asdf

asf本文版权归作者和博客园共有,欢迎转载,转载请注明原文链接:https://www.cnblogs.com/lllliuxiaoxia/p/18200863另外欢迎关注公众号,一起讨论学习

啊手动阀手动阀

阿斯顿发射点发射点发生发射点发撒打发本文来自博客园,作者:胖树,转载请注明原文链接:https://www.cnblogs.com/lllliuxiaoxia/p/18200857关注我的公众号不定期推送资讯

配置SQLServer远程连接

要在 SQL Server 上启用远程连接,需要执行以下步骤:1、确保 SQL Server 已启用远程连接:  登录到 SQL Server 所在的计算机上。  打开 SQL Server Management Studio (SSMS)。  使用 Windows 身份验证或 SQL Server 身份验证登录 SQL Server。  在左侧的对象资源管理…

uCTRL论文阅读笔记

uCTRL: Unbiased Contrastive Representation Learning via Alignment and Uniformity for Collaborative Filtering论文阅读笔记 这篇文章应该是关于无偏推荐的 Abstract ​ 由于协作过滤(CF)模型的隐式用户反馈偏向于流行的项目,CF模型倾向于产生带有流行偏差的推荐列表。…

SQL Server 2012提供了多种备份和还原数据库的方法,包括以下几种:

SQL Server 2012提供了多种备份和还原数据库的方法,包括以下几种:SQL Server Management Studio(SSMS):SSMS是一个支持图形用户界面的工具,可以通过它备份和还原整个数据库或特定的数据表、视图等。在SSMS中,可以通过右键单击数据库并选择“任务” > “备份”或“还原…

BUUCTF-WEB(15-20)

[极客大挑战 2019]BabySQL 打开题目就试了试万能密码,是不行的推测应该做了过滤 我们密码框输入1 1 or 1=1试试发现我们的or没了,union,select,where都被过滤了,应该是被替换成空字符,所以我们可以双写绕过 uunionnion sselectelect wwherehere由于这里or被过滤了,我们无…

11个国内外免费域名解析服务

11个国内外免费域名解析服务 一般域名使用注册商提供的域名解析服务虽然方便,但功能大多有限,特别是目前国内还会针对某些DNS服务器进行屏蔽,造成网站无法解析的情况出现,因此,使用第三方域名解析服务也是中国网站的必要选择,这里就介绍一些常见的免费域名解析服务。 域名…

5/19/2024 测试

10pts 拿下 D1!挂分挂了 290pts! 痛失 rk3总结P 都不是,(本人)成绩构思依托(10pts)。 有重题,而且是同一场比赛出现两道 一模一样 的题(T1 && T4)题目 & 题解 T1 Color Description 有 \(n\) 个球排成一列,每个球都有一个颜色,用 \(A \sim Z\) 的大写字…

redis存储之序列化问题

1.问题描述:在SpringBoot集成Redis过程中,添加进redisf的内容如下2.出现这种情况的原因 (1) 键和值都是通过Spring提供的Serializer序列化到数据库的 (2) RedisTemplate默认使用的是JdkSerializationRedisSerializer,StringRedisTemplate默认使用的是StringRedisSerializer 3…