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

效果

在使用 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 包啦。

相关推荐
mCell7 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip7 小时前
Node.js 子进程:child_process
前端·javascript
excel10 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel11 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼12 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping12 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙13 小时前
[译] Composition in CSS
前端·css
白水清风13 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix14 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780014 小时前
new、原型和原型链浅析
前端·javascript