前端架构: 脚手架之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

相关文章

Pandas使用SQLite3实战

《Pandas使用SQLite3实战》本文主要介绍了Pandas使用SQLite3实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1 环境准备2 从 SQLite3VlfrWQzgt 读取数据到 DataFrame基础用法:读

JSON Web Token在登陆中的使用过程

《JSONWebToken在登陆中的使用过程》:本文主要介绍JSONWebToken在登陆中的使用过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录JWT 介绍微服务架构中的 JWT 使用结合微服务网关的 JWT 验证1. 用户登录,生成 JWT2. 自定义过滤

Linux卸载自带jdk并安装新jdk版本的图文教程

《Linux卸载自带jdk并安装新jdk版本的图文教程》在Linux系统中,有时需要卸载预装的OpenJDK并安装特定版本的JDK,例如JDK1.8,所以本文给大家详细介绍了Linux卸载自带jdk并... 目录Ⅰ、卸载自带jdkⅡ、安装新版jdkⅠ、卸载自带jdk1、输入命令查看旧jdkrpm -qa

Java中StopWatch的使用示例详解

《Java中StopWatch的使用示例详解》stopWatch是org.springframework.util包下的一个工具类,使用它可直观的输出代码执行耗时,以及执行时间百分比,这篇文章主要介绍... 目录stopWatch 是org.springframework.util 包下的一个工具类,使用它

Java使用Curator进行ZooKeeper操作的详细教程

《Java使用Curator进行ZooKeeper操作的详细教程》ApacheCurator是一个基于ZooKeeper的Java客户端库,它极大地简化了使用ZooKeeper的开发工作,在分布式系统... 目录1、简述2、核心功能2.1 CuratorFramework2.2 Recipes3、示例实践3

springboot security使用jwt认证方式

《springbootsecurity使用jwt认证方式》:本文主要介绍springbootsecurity使用jwt认证方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录前言代码示例依赖定义mapper定义用户信息的实体beansecurity相关的类提供登录接口测试提供一

go中空接口的具体使用

《go中空接口的具体使用》空接口是一种特殊的接口类型,它不包含任何方法,本文主要介绍了go中空接口的具体使用,具有一定的参考价值,感兴趣的可以了解一下... 目录接口-空接口1. 什么是空接口?2. 如何使用空接口?第一,第二,第三,3. 空接口几个要注意的坑坑1:坑2:坑3:接口-空接口1. 什么是空接

springboot security快速使用示例详解

《springbootsecurity快速使用示例详解》:本文主要介绍springbootsecurity快速使用示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝... 目录创www.chinasem.cn建spring boot项目生成脚手架配置依赖接口示例代码项目结构启用s

Python如何使用__slots__实现节省内存和性能优化

《Python如何使用__slots__实现节省内存和性能优化》你有想过,一个小小的__slots__能让你的Python类内存消耗直接减半吗,没错,今天咱们要聊的就是这个让人眼前一亮的技巧,感兴趣的... 目录背景:内存吃得满满的类__slots__:你的内存管理小助手举个大概的例子:看看效果如何?1.

java中使用POI生成Excel并导出过程

《java中使用POI生成Excel并导出过程》:本文主要介绍java中使用POI生成Excel并导出过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录需求说明及实现方式需求完成通用代码版本1版本2结果展示type参数为atype参数为b总结注:本文章中代码均为