前端架构: 实现脚手架终端UI样式之ANSI escape code, Chalk, Ora介绍

在脚手架当中实现命令行的UI显示


1 )概述

  • 在命令行中,如果想实现除传统的常规文本以外的内容
  • 比如想对字体进行加粗斜体下划线,包括对它改变颜色改变前景色改变后景色等等
  • 需要借助一个叫做 ANSI escape code 这样的一个概念
  • 它其实是一个标准,它可以用来控制光标的位置
  • 它可以改变自己的颜色,可以改变它的字体,以及它的样式
  • 所以 ANSI escape code 这个内容对后续开发非常重要
  • 常用的基于这个 ANSI escape code 封装的两个库
  • 这两个核心库分别是 chalk 和 ora

2 ) 关于 ANSI escape code

  • 文档:https://handwiki.org/wiki/ANSI_escape_code
  • 终端 ANSI 转义序列,简单的来说,它就是定义的一个规范
  • 这个规范可以让我们在终端当中通过转义字符实现一些特殊操作
  • 比如我们可以将光标上移或者下移左移或者右移,还可以换行等等这些操作
  • 甚至还可以把当前输出的这些信息给擦除掉,同时可以实现什么字体的一个变化
  • 比如:加粗,下划线,倾斜等等,会有一些字体的样式变化了
  • 最后最重要的是给字体变颜色,变成各种各样的颜色
  • 由于终端中,它会受到一定的限制,所以并不能识别所有的颜色
  • 具体查询文档:
    • CSI
    • SGR_(Select_Graphic_Rendition)_parameters
    • Colors
    • Terminal 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[0m
    console.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 要复杂一些,因为它涉及到很多命令行更底层的信息
  • 比如说对游标的控制,对输入输出流的控制等

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

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

相关文章

人工智能与机器学习行业新闻:颠覆企业运营方式的 AI 趋势

AI 推动业务转型 人工智能 (AI) 和机器学习已经在重塑各行各业的业务模式。AI 通过处理和整合数据支持战略决策的制定,其规模和速度远远超过了人脑。无疑,未来我们还将在 AI 领域取得许多重大突破,而拥有大量数据的行业可能会从人工智能革命…

Practical User Research for Enterprise UX

2.1 Why It’s Hard to Get Support for Research in Enterprises 2.1.1 Time and Budget Instead of answering the question “What dowe gain if we do this research?”, ask instead “What do we stand to lose if we don’t do the research?” 2.1.2 Legacy Thinkin…

鸿蒙会成为安卓的终结者吗?

随着近期鸿蒙OS系统推送测试版的时间确定,关于鸿蒙系统的讨论再次升温。 作为华为自主研发的操作系统,鸿蒙给人的第一印象是具有颠覆性。 早在几年前,业内就开始流传鸿蒙可能会代替Android的传言。毕竟,Android作为开源系统&…

迷你世界彩色建筑生成

local x0,y0,z00,20,0--起点坐标 local dx,dy,dz100,100,1--外切长方体横纵竖长度 local count,all0,dx*dy*dz--计数,总数 local m,k10000,0--单次生成方块数,无用循环值 local x,y,z0,0,0--当前坐标 local id600--方块id local demath.random(2,12)/2 -…

如何使用idea连接服务器上的mysql?

安全组进行开放 具体步骤 关闭防火墙 开放端口号 重启防火墙 firewall-cmd --reload在mysql进行修改配置 update user set host % where user root;flush privileges;使得其他网络也可以连接这个数据库 另外如果想要sqlyog或者其他图形化界面要连接到数据库可以看下面这…

创建无名信号量

#include<myhead.h> //创建无名信号量 sem_t sem;//定义生产者 void *task1(void *arg) {int num5;while(num--){sleep(1);printf("我生产了一辆特斯拉\n");//释放资源sem_post(&sem);}//退出线程pthread_exit(NULL); } //定义消费者 void *task2(void *ar…

Python: argparse基本用法

Python: argparse基本用法 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;【Matplotlib之旅&#xff1a;零基础精通数据可视化】 &#x1f4a1; 创作高质量博文&#xff0c;分享更多关于深度学习、PyTorch、Python领域的优质内容&#xff0…

Flink介绍

Flink 介绍 文章目录 Flink 介绍1. 简介1.1 背景1.2 用途 2. 核心概念2.1 流&#xff08;Stream&#xff09;2.2 转换&#xff08;Transformation&#xff09;2.3 窗口&#xff08;Window&#xff09;2.4 状态&#xff08;State&#xff09; 3. 编程模型3.1 编程模型介绍3.2 程…

排序算法1:冒泡排序、快速排序、插入排序

排序算法&#xff1a;交换类排序&#xff0c;插入类排序、选择类排序、归并类排序 交换类排序&#xff1a;冒泡排序、快速排序 一、冒泡排序 #include <stdio.h> #include <stdlib.h> #include <time.h> typedef int ElemType; typedef struct{ElemType *e…

【Java EE初阶二十二】https的简单理解

1. 初识https 当前网络上,主要都是 HTTPS 了,很少能见到 HTTP.实际上 HTTPS 也是基于 HTTP.只不过 HTTPS 在 HTTP 的基础之上, 引入了"加密"机制&#xff1b;引入 HTTPS 防止你的数据被黑客篡改 &#xff1b; HTTPS 就是一个重要的保护措施.之所以能够安全, 最关键的…

第2.5章:StarRocks表设计--Colocation Join

目录 一、StarRocks数据划分 1.1 分区 1.2 分桶 二、Colocation Join实现原理 2.1 Colocate Join概述 2.2 Colocate Join实现原理 三、应用案例 注&#xff1a;本篇文章阐述的是StarRocks-3.2版本的Colocation Join 官网文章地址&#xff1a; Colocate Join | StarRoc…

css知识:盒模型盒子塌陷BFC

1. css盒模型 标准盒子模型&#xff0c;content-box 设置宽度即content的宽度 width content 总宽度content&#xff08;width设定值&#xff09; padding border IE/怪异盒子模型&#xff0c;border-box width content border padding 总宽度 width设定值 2. 如何…

互联网加竞赛 大数据疫情分析及可视化系统

文章目录 0 前言2 开发简介3 数据集4 实现技术4.1 系统架构4.2 开发环境4.3 疫情地图4.3.1 填充图(Choropleth maps)4.3.2 气泡图 4.4 全国疫情实时追踪4.6 其他页面 5 关键代码最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 大数据疫…

oppo手机如何录屏?解锁录屏新功能!

“最近换了一款oppo手机&#xff0c;感觉它的拍照功能真的很强大。但除此之外&#xff0c;我发现oppo还有许多隐藏功能&#xff0c;比如录屏。但我尝试了很久&#xff0c;都没找到录屏的开关在哪里。有没有哪位oppo用户知道怎么打开这个功能呢&#xff1f;” 随着科技的不断发…

Nexus 仓库

一、仓库介绍 1.仓库类型 proxy&#xff1a;是远程仓库的代理。比如说在nexus中配置了一个central repository的proxy&#xff0c;当用户向这个proxy请求一个artifact&#xff0c;这个proxy就会先在本地查找&#xff0c;如果找不到的话&#xff0c;就会从远程仓库下载&#x…

小迪安全29WEB 攻防-通用漏洞SQL 注入增删改查盲注延时布尔报错

#知识点&#xff1a; 1、明确查询方式注入 Payload 2、明确查询方式注入产生功能 3、明确 SQL 盲注延时&布尔&报错 #详细点&#xff1a; 盲注就是在注入过程中&#xff0c;获取的数据不能回显至前端页面。 也就是在代码中无echo将sql结果输出出来 此时&#…

详解 IT/OT 融合的五层架构(从PLC/SCADA到MES/ERP)

作为一个电气自动化的从业者&#xff0c;有必要搞懂下面术语的意思。 IT&#xff1a;Information Technology的缩写&#xff0c;指信息技术&#xff1b; OT&#xff1a;Operational Technology的缩写&#xff0c;指操作层面的技术&#xff0c;比如运营技术&#xff1b;CT&…

⭐北邮复试刷题LCR 037. 行星碰撞__栈 (力扣119经典题变种挑战)

LCR 037. 行星碰撞 给定一个整数数组 asteroids&#xff0c;表示在同一行的小行星。 对于数组中的每一个元素&#xff0c;其绝对值表示小行星的大小&#xff0c;正负表示小行星的移动方向&#xff08;正表示向右移动&#xff0c;负表示向左移动&#xff09;。每一颗小行星以相…

VirtualPainting:新一代多传感器融合方案,大幅提升3D目标检测性能

论文标题&#xff1a;VirtualPainting: Addressing Sparsity with Virtual Points and Distance-Aware Data Augmentation for 3D Object Detection 论文作者&#xff1a;Sudip Dhakal, Dominic Carrillo, Deyuan Qu, Michael Nutt, Qing Yang, Song Fu 导读&#xff1a; 本文…

后端程序员入门react笔记——react的diff算法(三)

diffing算法 虚拟dom 我们知道&#xff0c;react里面操作的都是虚拟dom&#xff0c;最后经过render渲染为真正的dom&#xff0c;那么为什么要提出虚拟dom这个概念呢&#xff1f;其实就是将逻辑和视图区分开&#xff0c;react的虚拟dom&#xff0c;就相当于mvc的c&#xff0c;…