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

  • 使用

    js 复制代码
    // 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

      mjs 复制代码
      import chalk from 'chalk';
      console.log(chalk.red('Hello Chalk') + ' 这里就是默认颜色' + chalk.blue(' 这里是蓝色'));
  • 从上面的例子可以看出,多种种颜色,混搭使用

  • 再来看看链式调用

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

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

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

    js 复制代码
    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')); // 柯里化调用, 只能支持这种,不能继续加()了
  • 基于以上示例,可以定义一些列的工具函数, 例如

    js 复制代码
    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参数

    js 复制代码
    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 命令

    shell 复制代码
    $ chalk --help
    
      Usage
        $ 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'

        shell 复制代码
        hello chalk
      • $ chalk -t '{red hello chalk}'

        shell 复制代码
        hello chalk
        • 同样输出,但是显示的是 红色
      • $ chalk -t '{red.bold hello chalk}'

        shell 复制代码
        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 所有支持的命令都显示出来, 如下
      • 这些都是它支持的用法,包括前景色,背景色等
相关推荐
不想上班只想要钱3 分钟前
vue3 ts:声明的一个数组不能将类型“boolean”分配给类型“never”。
前端·vue.js
OEC小胖胖5 分钟前
Next.js 介绍:为什么选择它来构建你的下一个 Web 应用?
开发语言·前端·web·next.js
切糕师学AI15 分钟前
如何建立针对 .NET Core web 程序的线程池的长期监控
java·前端·.netcore
F2E_Zhangmo3 小时前
基于cornerstone3D的dicom影像浏览器 第三章 拖拽seriesItem至displayer上显示第一张dicom
前端·javascript·cornerstone·cornerstone3d·cornerstonejs
gnip8 小时前
Jst执行上下文栈和变量对象
前端·javascript
excel8 小时前
🐣 最简单的卷积与激活函数指南(带示例)
前端
醉方休9 小时前
npm/pnpm软链接的优点和使用场景
前端·npm·node.js
拉不动的猪9 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
How_doyou_do9 小时前
数据传输优化-异步不阻塞处理增强首屏体验
开发语言·前端·javascript
奇舞精选9 小时前
超越Siri的耳朵:ASR与Whisper零代码部署实战指南
前端·人工智能·aigc