效果

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