中国十大设计素材网站,东海县城乡建设局网站,注册推广赚钱一个10元,企业网站的一般要素包括哪些在脚手架当中实现命令行的UI显示 1 #xff09;概述
在命令行中#xff0c;如果想实现除传统的常规文本以外的内容比如想对字体进行加粗斜体下划线#xff0c;包括对它改变颜色改变前景色改变后景色等等需要借助一个叫做 ANSI escape code 这样的一个概念它其实是一个标准概述
在命令行中如果想实现除传统的常规文本以外的内容比如想对字体进行加粗斜体下划线包括对它改变颜色改变前景色改变后景色等等需要借助一个叫做 ANSI escape code 这样的一个概念它其实是一个标准它可以用来控制光标的位置它可以改变自己的颜色可以改变它的字体以及它的样式所以 ANSI escape code 这个内容对后续开发非常重要常用的基于这个 ANSI escape code 封装的两个库这两个核心库分别是 chalk 和 ora
2 ) 关于 ANSI escape code
文档https://handwiki.org/wiki/ANSI_escape_code终端 ANSI 转义序列简单的来说它就是定义的一个规范这个规范可以让我们在终端当中通过转义字符实现一些特殊操作比如我们可以将光标上移或者下移左移或者右移还可以换行等等这些操作甚至还可以把当前输出的这些信息给擦除掉同时可以实现什么字体的一个变化比如加粗下划线倾斜等等会有一些字体的样式变化了最后最重要的是给字体变颜色变成各种各样的颜色由于终端中它会受到一定的限制所以并不能识别所有的颜色具体查询文档 CSISGR_(Select_Graphic_Rendition)_parametersColorsTerminal output sequences
repl环境使用示例
在终端中使用nodejs执行或在浏览器console面板执行均可
2.1 改变字体颜色(前景红色) \x1B[31m
console.log(\x1B[31m%s, Hello ANSI escape code)这里\x1B 是固定写法, x表示16进制数这个数值可以在文档上查询红色中: 31 是前景色41 是背景色这里的 m 在 上述 CSI 文档中查询显示是渲染的参数在数字后面加上m因为都是渲染属性 案例效果 2.2 改变背景色(还是红色) \x1B[41m
console.log(\x1B[41m%s, Hello ANSI escape code)案例效果 这里调用后nodejs终端环境不会再次恢复如果需要恢复\x1B[0mconsole.log(\x1B[41m%s\x1B[0m, Hello ANSI escape code)案例效果 2.3 添加下划线 \x1B[4m
console.log(\x1B[41m\x1B[4m%s\x1B[0m, Hello ANSI escape code)案例效果 2.4 改变光标下移 \x1B[2B
console.log(\x1B[2B%s, 光标下移)希望当前位移就需要找到位移属性在 CSI 表中查询Cursor Down是 B这里的2是下移2行这个在终端中可用在浏览器console面板中无效 案例效果 2.5 水平移动 \x1B[2G
console.log(\x1B[2G%s, 水平移动)2是2列的意思 案例效果 2.6 其他
后续依次类推可以在文档中查询使用了解到这个程度加上查询文档即可应付后续脚手架开发需求在实际开发过程中绝大部分情况下是不太需要自己写 ANCI 序列的除非你的需求很特殊但是了解了这个实现原理以后有助于以后想用的时候可以用的起来
3 chalk
chalk 主要的用途是改变文本的颜色它主要是改变文本当中中命令行中文本的一个样式可以改变各种各样的颜色可以加下划线有粗体有斜体等各种样式可以改前景色也可改背景色可以看到它一周的下载量达到惊人的两亿多(228,575,311 动态数据)可见这个库的使用是非常广泛
4 ora
这个 ora 这个库最主要是用来做 loading 状态加载的比如完成一个下载的动作比如等待一个 webpack 打包都需要使用这个库来给我们去做loading的一个渲染这个库使可以看到一周下载量达到一千多万次(18,244,955 动态数据)是一个非常大的库它关联的一个叫做 cli-spinners 用来做这个loading状态物料的一个管理这个 ora 库底层源码会比 chalk 要复杂一些因为它涉及到很多命令行更底层的信息比如说对游标的控制对输入输出流的控制等
