前端架构: 脚手架之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 所有支持的命令都显示出来, 如下
      • 这些都是它支持的用法,包括前景色,背景色等
相关推荐
学习前端的小z1 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
彭世瑜25 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund40426 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish26 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five28 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序28 分钟前
vue3 封装request请求
java·前端·typescript·vue
临枫54128 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
前端每日三省30 分钟前
面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?
开发语言·前端·javascript
小刺猬_98530 分钟前
(超详细)数组方法 ——— splice( )
前端·javascript·typescript
渊兮兮31 分钟前
Vue3 + TypeScript +动画,实现动态登陆页面
前端·javascript·css·typescript·动画