我掌握了少数人才知道持续集成系统的日志密码

echo -e "\u001B[31m hello"

ESC[ 38;5;<n> m // 设置字体颜色
ESC[ 48;5;<n> m // 设置背景颜色
    0-7:  standard colors (as in ESC [ 30–37 m)
    8-15:  high intensity colors (as in ESC [ 90–97 m)
    16-231:  6 × 6 × 6 cube (216 colors): 16 + 36 × r + 6 × g + b (0 ≤ r, g, b ≤ 5)
   232-255:  grayscale from black to white in 24 steps

echo -e "\u001B[38;5;11m hello"

echo -e "\u001B[48;5;14;38;5;13m hello"

ESC[ 38;2;<r>;<g>;<b>m // 前景色
ESC[ 48;2;<r>;<g>;<b>m // 背景色

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

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

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 `<span class="${color} bg-${bgColor}">${value}</span>`
}
function bgCode(value, color) {
    return `<span class="${color}">${value}</span>`
}
function singleCode(value) {
    return `<span>${value}</span>`
}

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

// 项目目录结构
demo
 |- package.json
 |- index.html
 |- webpack.config.js
 |- /src
   |- index.js
index.js
build.sh

// index.js
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

// 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)

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