NPM是如何爲其更新消息創建邊界的？

Question

我假設他們使用unicode字符來呈現更新消息周圍的黃色框。

使用了哪些字符，它在所有平臺上看起來都一樣嗎？

Answer 1

NPM是如何爲他們創造更新消息的邊界？

NPM使用npmlog打印到控制檯，npmlog利用console-control-strings & 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')}`)