效果
在使用 create-vue 脚手架时，想实现如下的打印效果。
探究过程
翻到源码里看到这一行
没错，绿色部分就是告诉我们如何生成的。可以看到引入了 gradient-string 包
于是乎，我来试试
pnpm i gradient-string
pnpm i --save-dev @types/gradient-string
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[
console.log('🚀 ~ coolGradient:', encodeURI(coolGradient).replaceAll('%1B%5B', '\x1B['))
打印结果
这里 %20 就是空格啦，同样的思路，全局替换下就可以了。
这时候我们就可以拿到打印的字符串结果，去替换引入的 gradient-string 包啦。
