例如：

 
 
 

  
  
  
echo -e "\u001B[38;2;100;228;75m hello" 
 
 
 

輸出綠色的字體代表 rgb(100,228,75)。

解析工具

我們知道了轉(zhuǎn)義的規(guī)范后，那么我們需要將 ANSI 字符進(jìn)行解析。

由于規(guī)范比較多，因此我們先調(diào)研一下在 js 中常用的色彩庫(kù)，來(lái)進(jìn)行一個(gè)小小的探索。

由于 3 / 4bit 的兼容性更好，大多數(shù)工具(如chalk)會(huì)采用這 8 / 16 色來(lái)做高亮，因此我們先實(shí)現(xiàn)一個(gè) 8 / 16 色的解析。

這里參考了 ansiparse 這個(gè)解析庫(kù)：

核心思路為：

 
 
 

  
  
  
const ansiparse = require('ansiparse') 
  
  
  
 
  
  
  
const ansiStr = "\u001B[34mHello \u001B[39m World \u001B[31m! \u001B[39m" 
  
  
  
 
  
  
  
const json = ansiparse(ansiStr) 
  
  
  
console.log(json) 
  
  
  
 
  
  
  
// json輸出如下： 
  
  
  
[ 
  
  
  
  { foreground: 'blue', text: 'Hello ' }, 
  
  
  
  { text: ' World ' }, 
  
  
  
  { foreground: 'red', text: '! ' } 
  
  
  
] 
 
 
 

然后我們可以寫(xiě)一個(gè)函數(shù)來(lái)遍歷上面解析得到的 JSON數(shù)組，輸出 HTML。

 
 
 

  
  
  
function createHtml(ansiList, wrap = '') { 
  
  
  
    let html = ''; 
  
  
  
    for (let i = 0; i < ansiList.length; i++) { 
  
  
  
        const htmlFrame = ansiList[i]; 
  
  
  
 
  
  
  
        const {background = '', text, foreground = ''} = htmlFrame; 
  
  
  
        if(background && foreground) { 
  
  
  
            if(text.includes('\n')) { 
  
  
  
                html += wrap; 
  
  
  
                continue; 
  
  
  
            } 
  
  
  
            html += fontBgCode(text, foreground, background); 
  
  
  
            continue; 
  
  
  
        } 
  
  
  
        if (background || foreground) { 
  
  
  
            const color = background ? `bg-${background}` : foreground; 
  
  
  
            let textColor = bgCode(text, color); 
  
  
  
 
  
  
  
            textColor = textColor.replace(/\n/g, wrap); 
  
  
  
             
  
  
  
            html += textColor; 
  
  
  
            continue; 
  
  
  
        } 
  
  
  
        if (text.includes('\n')) { 
  
  
  
            const textColor = text.replace(/\n/g, wrap); 
  
  
  
            html += textColor; 
  
  
  
            continue; 
  
  
  
        } 
  
  
  
        html += singleCode(text); 
  
  
  
    } 
  
  
  
    html += '' 
  
  
  
    return html; 
  
  
  
} 
  
  
  
 
  
  
  
function fontBgCode(value, color, bgColor) { 
  
  
  
    return `${value}` 
  
  
  
} 
  
  
  
 
  
  
  
function bgCode(value, color) { 
  
  
  
    return `${value}` 
  
  
  
} 
  
  
  
 
  
  
  
function singleCode(value) { 
  
  
  
    return `${value}` 
  
  
  
} 
 
 
 

使用示例如下：

 
 
 

  
  
  
const str = "\u001B[34mHello \u001B[39m World \u001B[31m! \u001B[39m"; 
  
  
  
 
  
  
  
console.log(createHtml(parseAnsi(str))); 
  
  
  
 
  
  
  
// Hello World! 
 
 
 

部署實(shí)戰(zhàn)

有了上面的部分我們就來(lái)用一個(gè)簡(jiǎn)單的demo實(shí)際演示一下部署日志吧!

 
 
 

  
  
  
// 項(xiàng)目目錄結(jié)構(gòu) 
  
  
  
demo 
  
  
  
 |- package.json 
  
  
  
 |- index.html 
  
  
  
 |- webpack.config.js 
  
  
  
 |- /src 
  
  
  
   |- index.js 
  
  
  
index.js 
  
  
  
build.sh 
 
 
 

我們?cè)?index.js 中啟動(dòng)一個(gè) build 腳本，來(lái)模擬一下我們真實(shí)的部署場(chǎng)景。

 
 
 

  
  
  
const { spawn } = require('child_process'); 
  
  
  
const cmd = spawn('sh', ['build.sh']); 
  
  
  
 
  
  
  
cmd.stdout.on('data', (data) => { 
  
  
  
  console.log(`stdout: ${data}`); 
  
  
  
}); 
  
  
  
 
  
  
  
cmd.stderr.on('data', (data) => { 
  
  
  
  console.log(`stderr: ${data}`); 
  
  
  
}); 
  
  
  
 
  
  
  
cmd.on('close', (code) => { 
  
  
  
  console.log(`child process exited with code ${code}`); 
  
  
  
}); 
  
  
  
// build.sh 
  
  
  
 
  
  
  
cd demo 
  
  
  
 
  
  
  
npx webpack 
 
 
 

我們?cè)诮K端嘗試一下，控制臺(tái)輸入 node index.js

發(fā)現(xiàn)在輸出的日志中，并沒(méi)有看到對(duì)應(yīng)的色彩。

為什么從 child_process 為什么無(wú)法輸出色彩，而我們?nèi)绻诮K端中直接打包項(xiàng)目卻能夠輸出色彩呢?

Why?

第一反應(yīng)就是去查找根源，也就是使用頻率最高的幾個(gè)色彩輸出的庫(kù)。

以簡(jiǎn)單的方式給控制臺(tái)的輸出標(biāo)記顏色。

https://github.com/Marak/colors.js

https://github.com/chalk/chalk

在看了webpack-cli的源碼后，查到它是用了colorette作為色彩輸出庫(kù)的。

那么我們就來(lái)查看一下colorette的源碼一探究竟。

在入口文件的開(kāi)頭就看到一個(gè)變量isColorSupported來(lái)判斷是否支持色彩輸出。

https://github.com/jorgebucaran/colorette/blob/main/index.js#L17

 
 
 

  
  
  
// colorette/index.js 
  
  
  
import * as tty from "tty" 
  
  
  
 
  
  
  
const env = process.env || {} 
  
  
  
const argv = process.argv || [] 
  
  
  
 
  
  
  
const isDisabled = "NO_COLOR" in env || argv.includes("--no-color") 
  
  
  
 
  
  
  
const isForced = "FORCE_COLOR" in env || argv.includes("--color") 
  
  
  
const isWindows = process.platform === "win32" 
  
  
  
const isCompatibleTerminal = tty && tty.isatty && tty.isatty(1) && env.TERM && env.TERM !== "dumb" 
  
  
  
const isCI = "CI" in env && ("GITHUB_ACTIONS" in env || "GITLAB_CI" in env || "CIRCLECI" in env) 
  
  
  
 
  
  
  
export const isColorSupported = !isDisabled && (isForced || isWindows || isCompatibleTerminal || isCI) 
 
 
 

可以看到這種工具判斷了很多條件，來(lái)對(duì)我們的輸出流進(jìn)行處理。

在以上條件成立下，才會(huì)輸出 ANSI 日志。在不滿(mǎn)足以上情況的條件下，就會(huì)切換輸出更容易解析的方式。

const isWindows = process.platform === "win32"

參考：https://stackoverflow.com/questions/8683895/how-do-i-determine-the-current-operating-system-with-node-js

dumb: "啞終端"

啞終端指不能執(zhí)行諸如“刪行”、“清屏”或“控制光標(biāo)位置”的一些特殊ANSI轉(zhuǎn)義序列的計(jì)算機(jī)終端

參考：https://zh.wikipedia.org/wiki/%E5%93%91%E7%BB%88%E7%AB%AF

也就是說(shuō)我們的 child_process 的輸出流關(guān)閉了終端模式(TTY)，上面的四種情況都不滿(mǎn)足。所以我們得不到帶有 ANSI 的色彩日志。

How?

我們可以顯示傳入環(huán)境變量 FORCE_COLOR=1 或者命令帶上參數(shù) --color 強(qiáng)制啟動(dòng)顏色來(lái)解決這個(gè)問(wèn)題。

這樣我們就拿到了帶有 ANSI 顏色信息的輸出文本，最終解析得到 HTML。

 
 
 

  
  
  
asset main.js 132 bytes [compared for emit] [minimized] (name: main)
./src/index.js 289 bytes [built] [code generated]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
webpack 5.53.0 compiled with 1 warning in 201 ms
 
 
 
 

然后就可以在瀏覽器中展示我們彩色的輸出日志了，與在終端里輸出的一致。

參考

https://www.twilio.com/blog/guide-node-js-logging

https://github.com/jorgebucaran/colorette/blob/main/index.js#L17

https://en.wikipedia.org/wiki/ANSI_escape_code#Colors

https://stackoverflow.com/questions/4842424/list-of-ansi-color-escape-sequences

https://stackoverflow.com/questions/15011478/ansi-questions-x1b25h-and-x1be

https://bluesock.org/~willg/dev/ansi.html

https://www.cnblogs.com/gamesky/archive/2012/07/28/2613264.html

https://github.com/mmalecki/ansiparse