create-vue源码学习之 gradient-string 渐变色打印

Dreamy_lin2024-07-23 22:23

效果

在使用 create-vue 脚手架时，想实现如下的打印效果。

探究过程

翻到源码里看到这一行

没错，绿色部分就是告诉我们如何生成的。可以看到引入了 gradient-string 包

于是乎，我来试试

javascript 复制代码

pnpm i gradient-string    
pnpm i --save-dev @types/gradient-string

javascript 复制代码

import gradient from 'gradient-string'

async function init() {
  console.log()
  // process.stdout.isTTY 检查终端是否支持彩色输出
  // process.stdout.getColorDepth() > 8  检查终端的颜色深度。颜色深度通常以位（bit）为单位，8位表示256色，24位表示真彩色。
  console.log(
    process.stdout.isTTY && process.stdout.getColorDepth() > 8
      ? banners.gradientBanner
      : banners.defaultBanner
  )
  console.log()

  let coolGradient = gradient([
    { color: '#42d392', pos: 0 },
    { color: '#42d392', pos: 0.1 },
    { color: '#647eff', pos: 1 }
  ])('Vue.js - The Progressive JavaScript Framework')

  console.log('🚀 ~ coolGradient:', coolGradient)
}

init().catch((e) => {
  console.error(e)
})

看看打印结果：

可是我也不想引入包，想直接输出一串 ANSI 转义码，咋办？

先来分析下 create-vue 源码的这段 ANSI 转义码

在终端中，ANSI 转义码用于控制文本的颜色、背景色、样式等。这些转义码以 \x1B[ 开头，后面跟着一系列参数，最后以 m 结束。例如，\x1B[38;2;66;211;146m 表示设置前景色为 RGB(66, 211, 146)。其中红色标注的部分为我们要打印的文本 "Vue"。

愣是没找到合适的打印方法，突然想起一个骚操作那就是，encodeURI(coolGradient) ，来试试看

可以看到除了 %1B%5B，其他都一样，那就来个全局替换 %1B%5B --> \x1B[

javascript 复制代码

console.log('🚀 ~ coolGradient:', encodeURI(coolGradient).replaceAll('%1B%5B', '\x1B['))

打印结果

这里 %20 就是空格啦，同样的思路，全局替换下就可以了。

这时候我们就可以拿到打印的字符串结果，去替换引入的 gradient-string 包啦。