最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

例如：

 
 
 

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

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

解析工具

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

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

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

這里參考了 ansiparse 這個解析庫：

核心思路為：

 
 
 

  
  
  
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: '! ' } 
  
  
  
] 
 
 
 

然后我們可以寫一個函數(shù)來遍歷上面解析得到的 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! 
 
 
 

部署實戰(zhàn)

有了上面的部分我們就來用一個簡單的demo實際演示一下部署日志吧!

 
 
 

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

我們在 index.js 中啟動一個 build 腳本，來模擬一下我們真實的部署場景。

 
 
 

  
  
  
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 
 
 
 

我們在終端嘗試一下，控制臺輸入 node index.js

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

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

Why?

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

以簡單的方式給控制臺的輸出標記顏色。

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

https://github.com/chalk/chalk

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

那么我們就來查看一下colorette的源碼一探究竟。

在入口文件的開頭就看到一個變量isColorSupported來判斷是否支持色彩輸出。

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) 
 
 
 

可以看到這種工具判斷了很多條件，來對我們的輸出流進行處理。

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

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

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

dumb: "啞終端"

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

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

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

How?

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

這樣我們就拿到了帶有 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