NPM如何为更新消息创建边界？

Question

我假设他们使用unicode字符来渲染更新消息周围的黄色框。

使用了哪些字符，并且在所有平台上看起来都一样？

Answer 1

  

NPM如何为更新消息创建边框？

NPM使用npmlog打印到控制台，npmlog使用console-control-strings＆amp; gauge

• console-control-strings主要提供便利功能，可以在行周围移动光标并为文本着色。

• gauge提供进度条和微调器及其样式。

  

使用了哪些字符，并且在所有平台上看起来都一样？

Unicode box-drawing characters用于边框字符。我没有研究NPM使用的确切unicode字符。假设终端/平台被实现为支持unicode，并且不会使用自己的字符（即emojis）覆盖标准字符集，我不明白为什么它在整个平台上看起来不一样。

下面的代码段unicode字符不完全匹配。相反，它演示了如何使用control-control-strings打印接近NPM输出的内容。我确信有足够的修修补补，你可以确切地说。

const control = require('console-control-strings')

let title = `${control.color('cyan')}Update available 5.0.3 \u2192 5.0.4${control.color('reset')}`
let subtitle = `Run ${control.color('cyan')} npm i -g npm ${control.color('reset')}`
let borderWidth = (title.length > subtitle.length ? title.length : subtitle.length)

let topLeftCorner = '\u256D'
let topRightCorner = '\u256E'
let btmRightCorner = '\u256F'
let btmLeftCorner = '\u2570'

let border = [...Array(borderWidth)].map(() => { return '\u2500' }).join('')
let topBorder = `${control.nextLine()}${control.color('yellow')}${topLeftCorner}${border}${topRightCorner}${control.color('reset')}`
let btmBorder = `${control.nextLine()}${control.color('yellow')}${btmLeftCorner}${border}${btmRightCorner}${control.color('reset')}`
let lineWrapper = `${control.color('yellow')}\u2502${control.color('reset')}`

console.log(topBorder)
console.log(`${lineWrapper}${control.forward(borderWidth)}${lineWrapper}`)
console.log(`${control.nextLine()}${lineWrapper}${control.forward(4)}${title}${control.forward(5)}${lineWrapper}`)
console.log(`${lineWrapper}${control.forward(11)}${subtitle}${control.forward(10)}${lineWrapper}`)
console.log(`${lineWrapper}${control.forward(borderWidth)}${lineWrapper}`)
console.log(`${btmBorder}${control.color('reset')}`)