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 包啦。

相关推荐
coder_pig18 分钟前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
万少24 分钟前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder26 分钟前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix37 分钟前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句37 分钟前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易37 分钟前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员
小飞悟44 分钟前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子1 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
Whoisshutiao1 小时前
网安-XSS-pikachu
前端·安全·网络安全
惊鸿2871 小时前
Taro3+小程序Canvas动态生成海报和二维码分享到朋友圈
前端