交互式命令行美化工具——inquirer.js

JavaScript024

交互式命令行美化工具——inquirer.js,第1张

前言: 现在前端写项目估计都是使用 NodeJs 来构建,一般在安装 npm 包的时候,我们会对项目进行初始化,这是输入命令: npm init 或 npm init -y 。接下来就是几个交互命令,输入完成就会创建一个依赖文件: package.json 。

但如果想自己做一个脚手架或者在某些时候在 CMD 窗口进行交互,这个时候就可以使用 inquirer.js 。

首先 npm init 初始化一个文件夹,来测试这个库,然后安装包:

再在文件夹里面新建一个 app.js ,接下来的所有测试均在这个文件里面。

运行测试结果:

程序运行结果:

接下来如果你想要一百个输入那?肯定是。。。(情商)

看看 validate 是啥样?

测试结果:

看看三种不同输入结果有啥变化?

list 一般配合 choices 使用:

查看动图效果:

list 改成 rawlist

自己可以试试按下 h/H 回车的页面是啥。

如果不想自定义还可以:

使用首选编辑器打开一个临时文件,用户退出编辑器后,将读取临时文件的内容。首选编辑器可以指定。

用来更改显示行数只对 list, rawList, expand 或 checkbox 有效。

只有一行,通过上下方向键来选择:

2019年10月14日23:09:42

Cytoscape.js 为了性能,在个性化样式定制上,没有给出开箱即用的法子。

例如,想实现下面这样的效果图,G6有动画支持,而 Cytoscape.js 却没有。

如果确定要用Cytoscape.js ,该怎么实现这个效果呢?

当然,最直接的办法是用canvas动画来处理,但我暂时没精力研究canvas。

我想到了之前用过一个Canvas绘图库,里面提供了飞线图,正是我想要的效果。

能不能把二者结合呢?当然可以, 用Cytoscape.js 绘制静态节点,用DataV绘制动画 不就可以了嘛。

顺着这个思路,以很小的学习成本就实现了开头的那个demo。

灵活的组合使用工具,也是一门技术。