前端架构: 脚手架之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 所有支持的命令都显示出来, 如下
      • 这些都是它支持的用法,包括前景色,背景色等
相关推荐
前端爆冲8 分钟前
项目中无用export的检测方案
前端
热爱编程的小曾36 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin1 小时前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox1 小时前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行2 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox