前端架构: 脚手架之Chalk和Chalk-CLI使用教程

2024-02-22 04:28

本文主要是介绍前端架构: 脚手架之Chalk和Chalk-CLI使用教程,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Chalk

  • Chalk 是粉笔的意思, 它想表达的是,给我们的命令行中的文本添加颜色类似彩色粉笔的功能

  • 在官方文档当中,它的 Highlights 核心特性

    Expressive API
    Highly performant
    No dependencies
    Ability to nest styles
    256/Truecolor color support
    Auto-detects color support
    Doesn't extend String.prototype
    Clean and focused
    Actively maintained
    Used by ~86,000 packages as of October 4, 2022
    
    • 它的性能很高,没有三方依赖
    • 它能够支持256以及真彩色的实现
      • 也就是说这个库可以让你自己去定义它的色彩
      • 并不是说命令行中当中的256色之外能够支持更多
      • 如果终端不支持,肯定也是无效的
    • 在 2022.10.4 的时候,已经有超过 86000个包 引用它
      • 所以说,它是一个非常非常流行的库
  • 安装 $ npm i -S chalk

  • 使用

    // chalk.js
    const chalk = require('chalk');
    console.log(chalk);
    
    • 这种情况下,会报错,会提示 Instead change the require of index.js in /Users/xxx/Desktop/ui/src/chalk.js to a dynamic import() which is available in all CommonJS modules.
    • 现在这个库已经默认使用 ES Module 了,在其源码中都是用的 ES Module 的语法
  • 现在可以通过两种方式解决

    • 1.更改文件后缀,并在package.json中添加 "type": "module", 配置
    • 2.使用打包工具
    • 选择方案1
      import chalk from 'chalk';
      console.log(chalk.red('Hello Chalk') + ' 这里就是默认颜色' + chalk.blue(' 这里是蓝色'));
      
  • 从上面的例子可以看出,多种种颜色,混搭使用

  • 再来看看链式调用

    import chalk from 'chalk';
    console.log(chalk.red.bgGreen.bold('Hello Chalk'));
    
  • 多参数方式

    import chalk from 'chalk';
    console.log(chalk.red('hello', 'chalk'))
    
    • 这样可以多参数拼接,通过空格来拼接
  • 嵌套调用

    import chalk from 'chalk';
    console.log(chalk.red('Hello', chalk.underline('Chalk')));
    
  • 定义颜色在256色之外(rgb或hex随意定义)并嵌套

    import chalk from 'chalk';
    console.log(chalk.rgb(255,255,0).underline('Hello Chalk')); // 链式调用
    console.log(chalk.hex('#ff0000').bold('你好,世界')); // 链式调用
    console.log(chalk.hex('#0ff000')('Hello Wrold')); // 柯里化调用, 只能支持这种,不能继续加()了
    
  • 基于以上示例,可以定义一些列的工具函数, 例如

    import chalk from 'chalk';const error = (text) => console.log(chalk.bold.hex('#ff0000')(text));
    const warning = (text) => console.log(chalk.bold.hex('#ffa500')(text));error('Error')
    warning('Warning')
    
  • 自定义chalk使用, 传入一个Option参数,其实目前就支持这一个level参数

    import { Chalk } from 'chalk'; // 拿到构造器 Chalk/**
    Specify the color support for Chalk.By default, color support is automatically detected based on the environment.Levels:
    - `0` - All colors disabled.
    - `1` - Basic 16 colors support.
    - `2` - ANSI 256 colors support.
    - `3` - Truecolor 16 million colors support.
    */
    // const cc = new Chalk({level: 0}) // 0 所有颜色不再支持,调用 .red, .blue 等不会生效; 不在[0,3]抛异常
    const cc = new Chalk({level: 3}) // 0 所有颜色不再支持,调用 .red, .blue 等不会生效console.log(cc.hex('#0ff000')('Hello Wrold'));
    

chalk-cli

  • 文档:https://www.npmjs.com/package/chalk-cli
  • 可全局安装 $ npm install --global chalk-cli
  • 可在全局生成一个 chalk 命令
    $ chalk --helpUsage$ chalk <style> ... <string>$ echo <string> | chalk <style> ...Options--template, -t    Style template. The `~` character negates the style.--stdin           Read input from stdin rather than from arguments.--no-newline, -n  Don't emit a newline (`\n`) after the input.--demo            Demo of all Chalk styles.Examples$ chalk red bold 'Unicorns & Rainbows'$ chalk -t '{red.bold Unicorns & Rainbows}'$ chalk -t '{red.bold Dungeons and Dragons {~bold.blue (with added fairies)}}'$ echo 'Unicorns from stdin' | chalk --stdin red bold
    
    • -t 按照一定格式输出
      • $ chalk -t 'hello chalk'
        hello chalk
        
      • $ chalk -t '{red hello chalk}'
        hello chalk
        
        • 同样输出,但是显示的是 红色
      • $ chalk -t '{red.bold hello chalk}'
        hello chalk
        
        • 标红并加粗
    • $ chalk red bold hellochalk red bold 'hello chalk'
      • 输出 hello 或 hello chalk
      • 标红并加粗
      • 注意,字符串中间有空格需要加引号
    • $ --stdin 接收上一个输入的结果
      • $ echo "Hello Chalk" | chalk red bold 这种,会把 bold 当做参数,输出的是 bold
      • $ echo "Hello Chalk" | chalk red bold --stdin
        • 像是这种, 会输出 Hello Chalk 并且标红加粗
        • –stdin 会把上一个命令的结果透传到chalk中来进行展示
    • $ -n 不会触发新行
      • $ chalk -n red bold 'hello chalk'
      • 这里就不会有换行展示,红色字体之后紧接着系统, 如: hello chalk Wang:~ wang$
    • $ --demo 把 chalk 所有支持的命令都显示出来, 如下
      • 这些都是它支持的用法,包括前景色,背景色等

这篇关于前端架构: 脚手架之Chalk和Chalk-CLI使用教程的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/734124

相关文章

如何使用 Python 读取 Excel 数据

《如何使用Python读取Excel数据》:本文主要介绍使用Python读取Excel数据的详细教程,通过pandas和openpyxl,你可以轻松读取Excel文件,并进行各种数据处理操... 目录使用 python 读取 Excel 数据的详细教程1. 安装必要的依赖2. 读取 Excel 文件3. 读

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基

如何为Yarn配置国内源的详细教程

《如何为Yarn配置国内源的详细教程》在使用Yarn进行项目开发时,由于网络原因,直接使用官方源可能会导致下载速度慢或连接失败,配置国内源可以显著提高包的下载速度和稳定性,本文将详细介绍如何为Yarn... 目录一、查询当前使用的镜像源二、设置国内源1. 设置为淘宝镜像源2. 设置为其他国内源三、还原为官方

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http

C 语言中enum枚举的定义和使用小结

《C语言中enum枚举的定义和使用小结》在C语言里,enum(枚举)是一种用户自定义的数据类型,它能够让你创建一组具名的整数常量,下面我会从定义、使用、特性等方面详细介绍enum,感兴趣的朋友一起看... 目录1、引言2、基本定义3、定义枚举变量4、自定义枚举常量的值5、枚举与switch语句结合使用6、枚

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

使用Python实现图像LBP特征提取的操作方法

《使用Python实现图像LBP特征提取的操作方法》LBP特征叫做局部二值模式,常用于纹理特征提取,并在纹理分类中具有较强的区分能力,本文给大家介绍了如何使用Python实现图像LBP特征提取的操作方... 目录一、LBP特征介绍二、LBP特征描述三、一些改进版本的LBP1.圆形LBP算子2.旋转不变的LB

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H

Python中__init__方法使用的深度解析

《Python中__init__方法使用的深度解析》在Python的面向对象编程(OOP)体系中,__init__方法如同建造房屋时的奠基仪式——它定义了对象诞生时的初始状态,下面我们就来深入了解下_... 目录一、__init__的基因图谱二、初始化过程的魔法时刻继承链中的初始化顺序self参数的奥秘默认

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr