ansis
v3.4.0
ターミナル出力にANSIの色とスタイルを適用するための小さくて高速なnode.jsライブラリ。
ANSISは、必要なすべての機能を提供し、同様のライブラリと比較できます。
ANSISはチョークやピコラーよりも高速です（一部のユースケースでは）、ベンチマークを参照してください。
import ansis , { red , green , cyan , black , ansi256 , hex } from 'ansis' ;
ansis . blueBright ( 'file.txt' )
green `Succeful!`
red `Error: ${ cyan ( file ) } not found!`
black . bgYellow `Warning!`
ansi256 ( 214 ) `Orange`
hex ( '#E0115F' ) . bold . underline ( 'Truecolor!' ) ANSISに似た最も人気のあるnode.jsライブラリ：
チョーク、ピコロール、コラット、クルール、ANSI-カラー、コロリスト、CLI-COLOR、COLORS-CLI、COLORS.JS
✅機能を比較しますか？パッケージサイズのベンチマークを比較します
chalk coloretteのpicocolors ansi-colorsのドロップイン交換import ansis, { red, bold, ansi256, hex } from 'ansis'red.bold.underline('text')red`Error: ${blue`file.js`} not found!`dim bold italic underline strikethroughred`Error!` redBright`Error!` bgRed`Error!` bgRedBright`Error!`fg(56)`violet` bg(208)`orange`rgb(224, 17, 95)`Ruby` hex('#96C')`Amethyst`open and close Properties `foo ${red.open}red{red.close} bar`としての生のANSIコードansis.strip()をストリップするNO_COLOR FORCE_COLORとフラグ--no-color --colornを使用すると、 end of lineに正しいスタイルのブレークString.prototypeを拡張しませんNestjs、Facebook/Stylex、Sapeelize、Salesforce、Oclif、webpackbar
バグを発見した場合や機能の提案がある場合は、GitHubで問題を作成してください。
今日、2つの最小のライブラリはansisとpicocolorsです。どちらも、ES Toolingコミュニティによって、古い、かさばるライブラリの最良の代替品として推奨されています。
picocolors ：6.4 kb-基本機能のみを備えたマイクロライブラリ。аnsis ：7.4 kb-必要なすべての機能を含む強力なライブラリ。chalk ：44.2 kb- ANSISと同様の機能を提供しますが、大きいです。picocolors ：単一のスタイルを適用するときに最速（たとえば、 redのみ）。аnsis ：2つ以上のスタイルを適用するときに最速です（たとえば、 red + bgWhite ）。chalk ：すべてのユースケースでANSISとPicocolorsの両方よりも遅い。他の多くのライブラリとは異なり、 ansis 、 chalk 、およびpicocolorsのみが積極的に維持されます。
colorette ：2年前に最後に更新されましたansi-colors ：最後に更新されました。3年前kleur ：2年前に最終更新されましたcli-color ：最後に更新されました〜1年前colors-cli ：1年前に最後に更新されましたcolors.js ：5年前に最後に更新されました red('foo')などの単一のスタイルのみを使用する場合、 Picocolorsが最良のソリューションです。
ただし、複数のスタイルを組み合わせるなど、さらに必要な場合（たとえば、 red + bold + bgWhite ）、
ANSI256色、Truecolor、または幅広い環境のサポート、 ANSISがより良い選択です。
同様のライブラリと比較して、機能、パッケージサイズ、ベンチマークのリストを調べてください。
ヒント
ansisやchalkなどのライブラリが提供するチェーンの構文を使用します。
ネストされた呼び出しは、チェーンの構文よりもはるかに遅く、読みやすいため、避けてください。
コードを清潔で読みやすくしてください！
red . bold . bgWhite `Error` ✅ ansis: faster , shorter , readable
pico . red ( pico . bold ( pico . bgWhite ( 'Error' ) ) ) picocolor: slower , longer , unreadable
red `Error: ${ cyan . underline ( file ) } not found!` ✅ ansis ?
pico . red ( `Error: ${ pico . cyan ( pico . underline ( file ) ) } not found!` ) picocolor ? chalkの交換coloretteを交換しますpicocolorsの交換ansi-colors交換kleurの交換cli-color交換npm install ansisESMまたはCommonJS構文を使用して、デフォルトモジュールまたは名前の色をインポートできます。
// ESM default import
import ansis from 'ansis' ;
// ESM named import
import { red , green , blue } from 'ansis' ;または
// CommonJS default import
const ansis = require ( 'ansis' ) ;
// CommonJS named import
const { red , green , blue } = require ( 'ansis' ) ;ANSIの色とスタイルのリストを参照してください。
console . log ( ansis . green ( 'Success!' ) ) ;
console . log ( green ( 'Success!' ) ) ;
// template string
console . log ( green `Success!` ) ;
// chained syntax
console . log ( green . bold `Success!` ) ;
// nested syntax
console . log ( red `The ${ blue . underline `file.js` } not found!` ) ;基本的な例Hello World! ：
import { red , black , inverse , reset } from 'ansis' ;
console . log ( green `Hello ${ inverse `ANSI` } World!
${ black . bgYellow `Warning:` } ${ cyan `/path/to/file.js` } ${ red `not found!` } ` ) ;出力： 
ansis 、 default importとnamed import両方をサポートします。
// default import
import ansis from 'ansis' ;
ansis . red . bold ( 'text' ) ;名前の色、スタイル、機能をインポートできます。すべてのインポートされた色とスタイルはchainableです。
// named import
import { red , hex , italic } from 'ansis' ;
red . bold ( 'text' ) ;デフォルトのインポートと名前付きインポートを組み合わせることができます。
// default and named import
import ansis , { red } from 'ansis' ;
const redText = red ( 'text' ) ; // colorized ANSI string
const text = ansis . strip ( redText ) ; // pure string without ANSI codes ansis 、関数構文red('error')とテンプレートリテラルred`error`の両方をサポートしています。
template literals使用すると、複雑なテンプレートをより読みやすく短くすることができます。
function syntaxを使用して、変数を色付けできます。
import { red } from 'ansis' ;
let message = 'error' ;
red ( message ) ;
red `text` ;
red `text ${ message } text` ; すべての色、スタイル、機能はチェーン可能です。各色またはスタイルは、任意の順序で組み合わせることができます。
import { red , bold , italic , hex } from 'ansis' ;
red . bold `text` ;
hex ( '#FF75D1' ) . bgCyan . bold `text` ;
bold . bgHex ( '#FF75D1' ) . cyan `text` ;
italic . bold . yellow . bgMagentaBright `text` ; 関数とテンプレートの文字列を互いにネストできます。他のライブラリ（チョーク、クルール、コラット、colors.jsなど）は、ネストされたテンプレート文字列をサポートしていません。
ネストされたテンプレート文字列：
import { red , green } from 'ansis' ;
red `red ${ green `green` } red` ;深いネストされたチェーンスタイル：
import { red , green , cyan , magenta , yellow , italic , underline } from 'ansis' ;
red ( `red ${ italic ( `red italic ${ underline ( `red italic underline` ) } ` ) } red` ) ;
// deep nested chained styles
green (
`green ${ yellow (
`yellow ${ magenta (
`magenta ${ cyan (
`cyan ${ red . italic . underline `red italic underline` } cyan` ,
) } magenta` ,
) } yellow` ,
) } green` ,
) ;出力： 
マルチラインネストテンプレート文字列：
import { red , green , hex , visible , inverse } from 'ansis' ;
// defined a Truecolor as the constant
const orange = hex ( '#FFAB40' ) ;
let cpu = 33 ;
let ram = 44 ;
let disk = 55 ;
// normal colors
visible `
CPU: ${ red ` ${ cpu } %` }
RAM: ${ green ` ${ ram } %` }
DISK: ${ orange ` ${ disk } %` }
` ;
// inversed colors
inverse `
CPU: ${ red ` ${ cpu } %` }
RAM: ${ green ` ${ ram } %` }
DISK: ${ orange ` ${ disk } %` }
` ;出力： 
色とスタイルには、チョーク、コラット、ピコラー、クルールなど、多くの人気のあるライブラリが使用する標準名があります。
| 前景の色 | 背景色 | スタイル |
|---|---|---|
black | bgBlack | dim |
red | bgRed | bold |
green | bgGreen | italic |
yellow | bgYellow | underline |
blue | bgBlue | strikethroughstrike ） |
magenta | bgMagenta | inverse |
cyan | bgCyan | visible |
white | bgWhite | hidden |
blackBrightエイリアス： greygray USスペル | bgBlackBrightエイリアス： bgGreybgGray usスペル | reset |
redBright | bgRedBright | |
greenBright | bgGreenBright | |
yellowBright | bgYellowBright | |
blueBright | bgBlueBright | |
magentaBright | bgMagentaBright | |
cyanBright | bgCyanBright | |
whiteBright | bgWhiteBright |
デフォルトでは、インポートされたansisインスタンスには、ベーススタイルと色が含まれています。 TrueColorのカスタム色名でベースカラーを拡張するにはansis.extend()メソッドを使用します。
import ansis from 'ansis' ;
// extend base colors
ansis . extend ( {
pink : '#FF75D1' ,
orange : '#FFAB40' ,
} ) ;
// the custom colors are available under namespace `ansis`
ansis . pink ( 'text' ) ;
ansis . orange ( 'text' ) ;TypeScriptを使用した使用例：
import ansis , { AnsiColorsExtend } from 'ansis' ;
// extend base colors
ansis . extend ( {
pink : '#FF75D1' ,
orange : '#FFAB40' ,
} ) ;
const write = ( style : AnsiColorsExtend < 'pink' | 'orange' > , message : string ) => {
console . log ( ansis [ style ] ( message ) ) ;
}
write ( 'red' , 'message' ) ; // base color OK
write ( 'pink' , 'message' ) ; // extended color OK
write ( 'orange' , 'message' ) ; // extended color OK
write ( 'unknown' , 'message' ) ; // TypeScript Error 256色の事前に定義されたセット。
| コード範囲 | 説明 |
|---|---|
| 0-7 | 標準色 |
| 8-15 | 明るい色 |
| 16-231 | 6×6×6キューブ（216色） |
| 232-255 | 24ステップでグレースケールを黒から白まで |
前景関数： ansi256(code)は短いエイリアスfg(code)を持っています
バックグラウンド関数： bgAnsi256(code)は短いエイリアスbg(code)を持っています
ansi256()およびbgAnsi256()メソッドは、chalkAPIとの互換性のために実装されています。
ANSIカラーコードを参照してください。
端子が16色のみをサポートする場合、ANSI 256色はベース16色に補間されます。
import { bold , ansi256 , fg , bgAnsi256 , bg } from 'ansis' ;
// foreground color
ansi256 ( 96 ) `Bright Cyan` ;
fg ( 96 ) `Bright Cyan` ; // alias for ansi256
// background color
bgAnsi256 ( 105 ) `Bright Magenta` ;
bg ( 105 ) `Bright Magenta` ; // alias for bgAnsi256
// function is chainable
ansi256 ( 96 ) . bold `bold Bright Cyan` ;
// function is avaliable in each style
bold . ansi256 ( 96 ) . underline `bold underline Bright Cyan` ;
// you can combine the functions and styles in any order
bgAnsi256 ( 105 ) . ansi256 ( 96 ) `cyan text on magenta background`
bg ( 105 ) . fg ( 96 ) `cyan text on magenta background` hexまたはrgb形式を使用できます。
前景関数： hex() rgb()
背景関数： bgHex() bgRgb()
import { bold , hex , rgb , bgHex , bgRgb } from 'ansis' ;
// foreground color
hex ( '#E0115F' ) . bold `bold Ruby` ;
hex ( '#96C' ) `Amethyst` ;
rgb ( 224 , 17 , 95 ) . italic `italic Ruby` ;
// background color
bgHex ( '#E0115F' ) `Ruby` ;
bgHex ( '#96C' ) `Amethyst` ;
bgRgb ( 224 , 17 , 95 ) `Ruby` ;
// you can combine the functions and styles in any order
bold . hex ( '#E0115F' ) . bgHex ( '#96C' ) `ruby bold text on amethyst background` ansis 、サポートされたカラースペースへのフォールバックをサポートします。
Truecolor —> 256 colors —> 16 colors —> no colors (black & white)
hex() 、 rgb() 、またはansis256()関数をサポートされていないTruecolorまたは256色で使用すると、色が補間されます。
各スタイルのopenプロパティとcloseプロパティを備えたANSIエスケープコードを使用できます。
import { red , bold } from 'ansis' ;
// each style has `open` and `close` properties
console . log ( `Hello ${ red . open } ANSI ${ red . close } World!` ) ;
// you can defiene own style which will have the `open` and `close` properties
const myStyle = bold . italic . black . bgHex ( '#E0115F' ) ;
console . log ( `Hello ${ myStyle . open } ANSI ${ myStyle . close } World!` ) ; ANSISクラスには、すべてのANSIコードを文字列から削除するメソッドstrip()が含まれています。
import ansis from 'ansis' ;
const ansiString = ansis . green `Hello World!` ;
const string = ansis . strip ( ansiString ) ;変数stringは、ANSIコードなしで純粋な文字列が含まれます。
end of lineに正しいスタイルの休憩をサポートします。
import { bgGreen } from 'ansis' ;
console . log ( bgGreen `nAnsisnNew LinenNext New Linen` ) ; 
あなた自身のテーマを定義します：
import ansis from 'ansis' ;
const theme = {
info : ansis . cyan . italic ,
warn : ansis . black . bgYellowBright ,
error : ansis . red . bold ,
ruby : ansis . hex ( '#E0115F' ) ,
} ;
theme . info ( 'info' ) ;
theme . warn ( 'warning' ) ;
theme . error ( 'error' ) ;
theme . ruby ( 'Ruby color' ) ; デフォルトでは、ターミナルコンソールの出力が着色され、ファイルの出力が無効です。
強制的に無効化または有効にするために、色付きの出力を使用して環境変数を使用し、 NO_COLORとFORCE_COLOR 。
NO_COLOR変数は、空でない値を備えたものでなければなりません。値は重要ではありません。たとえば、 NO_COLOR=1 NO_COLOR=true disable colors。
no_colorの標準的な説明を参照してください。
FORCE_COLOR変数は、値のいずれかを提示する必要があります。
FORCE_COLOR=0フォースは色を無効にしますFORCE_COLOR=1 force enable colors
force_colorによる標準の説明を参照してください。
たとえば、 app.js ：
import { red } from 'ansis' ;
console . log ( red `red color` ) ;端末でスクリプトを実行します。
$ node app.js # colored output in terminal
$ node app.js > log.txt # output in file without ANSI codes
$ NO_COLOR=1 node app.js # force disable colors, non colored output in terminal
$ FORCE_COLOR=0 node app.js # force disable colors, non colored output in terminal
$ FORCE_COLOR=1 node app.js > log.txt # force enable colors, output in file with ANSI codes
COLORTERMを使用しますCOLORTERM環境変数は、色のサポートを示すために端子エミュレーターによって使用されます。その値は、ターミナルエミュレータと提供される色のサポートのレベルによって異なります。
ansisによってサポートされる一般的に使用される値：
truecolorまたは24bit -1600万色ansi256 -ANSI 256色ansi -BASIC ANSI 16色ノードスクリプトを実行する前に、CMDで変数を設定できます。
COLORTERM=truecolor node script.js # force use truecolor
COLORTERM=ansi256 node script.js # force use 256 colors
COLORTERM=ansi node script.js # force use 16 olors
スクリプトで色レベルを設定するには、必要な値でCOLORTERM Environment変数を定義するJSファイルを作成し、 ansisの前にこのファイルをインポートします。
これは、たとえば、CLIアプリケーションをテストして、さまざまな環境や端子でサポートされている色レベルに関係なく、テスト結果が同じであることを確認するのに役立ちます。
level-truecolor.js
process . env . COLORTERM = 'truecolor' ;スクリプトファイル：
import './level-truecolor' ; // <= force use truecolor
import { red , ansi256 , hex } from 'ansis' ;
console . log ( hex ( '#FFAB40' ) ( 'orange' ) ) ; // native ANSI RGB color value
console . log ( ansi256 ( 200 ) ( 'pink' ) ) ; // native ANSI 256 color value
console . log ( red ( 'red' ) ) ; // native ANSI 16 color value レベル-256Colors.js
process . env . COLORTERM = 'ansi256' ;スクリプトファイル：
import './level-256colors' ; // <= force use 256 colors
import { red , ansi256 , hex } from 'ansis' ;
console . log ( hex ( '#FFAB40' ) ( 'orange' ) ) ; // fallback to ANSI 256 color value
console . log ( ansi256 ( 200 ) ( 'pink' ) ) ; // native ANSI 256 color value
console . log ( red ( 'red' ) ) ; // native ANSI 16 color value レベル-16Colors.js
process . env . COLORTERM = 'ansi' ;スクリプトファイル：
import './level-16colors' ; // <= force use 16 olors
import { red , ansi256 , hex } from 'ansis' ;
console . log ( hex ( '#FFAB40' ) ( 'orange' ) ) ; // fallback to ANSI 16 color value - `bright red`
console . log ( ansi256 ( 200 ) ( 'pink' ) ) ; // fallback to ANSI 16 color value - `bright magenta`
console . log ( red ( 'red' ) ) ; // native ANSI 16 color value CMD引数を使用します--no-colorまたは--color=falseを使用して色を無効にし、 --color有効にします。
たとえば、実行可能なスクリプトapp.js ：
#!/usr/bin/env node
import { red } from 'ansis' ;
console . log ( red `red color` ) ;端末でスクリプトを実行します。
$ ./app.js # colored output in terminal
$ ./app.js --no-color # non colored output in terminal
$ ./app.js --color=false # non colored output in terminal
$ ./app.js > log.txt # output in file without ANSI codes
$ ./app.js --color > log.txt # output in file with ANSI codes
$ ./app.js --color=true > log.txt # output in file with ANSI codes
警告
コマンドラインの引数は、環境変数よりも優先度が高い。
ANSISは、サポートされているカラー空間を自動的に検出します。
ANSISには、出力がANSIの色とスタイルをサポートしているかどうかにかかわらず、 boolean値を返す方法isSupported() 。
import ansis from 'ansis' ;
console . log ( 'Color output: ' , ansis . isSupported ( ) ) ;どの色空間がサポートされているかを検出する標準的な方法はありません。カラーサポートを検出する最も一般的な方法は、 TERMとCOLORTERM環境変数を確認することです。 CIシステムは、 CIおよびその他の特異的な環境変数の存在をチェックすることで検出できます。それをプログラムが実行しているオペレーティングシステムについての知識と組み合わせて、色を検出するのに十分な方法があります。
| ターミナル | ANSI 16 色 | ANSI 256 色 | 真実 色 | env。 学期 | env。 色ターム | 具体的には、env変数 |
|---|---|---|---|---|---|---|
| Azure CI | ✅ | バカ | tf_build agent_name | |||
| github ci | ✅ | ✅ | ✅ | バカ | ci、github_actions | |
| Gittea CI | ✅ | ✅ | ✅ | バカ | ci、gitea_actions | |
| gitlab ci | ✅ | バカ | CI、gitlab_ci | |||
| トラビスCI | ✅ | バカ | トラビス | |||
| PM2 isttyではありません | ✅1 | ✅1 | ✅1 | バカ | PM2_home pm_id | |
| JetBrains TeamCity > = 2020.1.1 | ✅ | ✅ | TeamCity_version | |||
| ジェットブレインのアイデア | ✅ | ✅ | ✅ | Xterm-256Color | terminal_emulator = 'Jetbrains-Jediterm' | |
| VSコード | ✅ | ✅ | ✅ | Xterm-256Color | Truecolor | |
| Windows ターミナル | ✅ | ✅ | ✅2 | |||
| Windows Powershell | ✅ | ✅ | ✅2 | |||
| MacOS端子 | ✅ | ✅ | Xterm-256Color | |||
| iterm | ✅ | ✅ | ✅ | Xterm-256Color | Truecolor | |
| ターミナルエミュレータキティ | ✅ | ✅ | ✅ | Xterm-Kitty | ||
| ターミナルエミュレータKDEコンソール | ✅ | ✅ | ✅ | Xterm-Direct |
参照：
コマンドを実行して、さまざまなライブラリによるいくつかの機能のサポートを確認します。
npm run compare
| 図書館 ________________ - 名前付きインポート - 色の命名 | ANSI 16色 | ANSI 256 色 | 真実 色 | 鎖 構文 | ネスト テンプレート文字列 | 新しい ライン | 色へのフォールバック | サポート env vars CLIフラグ |
|---|---|---|---|---|---|---|---|---|
ansis✅ named import✅ standard | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | →256 →16 →B＆W | NO_COLORFORCE_COLOR--no-color--color |
chalknamed import✅ standard | ✅ | ✅ | ✅ | ✅ | ✅ | →256 →16 →B＆W | NO_COLORFORCE_COLOR--no-color--color | |
kolorist✅ named importstandard | ✅ | ✅ | ✅ | →256 →B＆W | NO_COLORFORCE_COLOR | |||
cli-colornamed import✅ standard | ✅ | ✅ | ✅ | →16 →B＆W | NO_COLOR | |||
colors-clinamed importstandard | ✅ | ✅ | ✅ | ✅ | →B＆W | --no-color--color | ||
colors.jsnamed importstandard | ✅ | ✅ | ✅ | →B＆W | FORCE_COLOR--no-color--color | |||
ansi-colorsnamed import✅ standard | ✅ | ✅ | ✅ | FORCE_COLOR | ||||
colorette✅ named import✅ standard | ✅ | →B＆W | NO_COLORFORCE_COLOR--no-color--color | |||||
picocolorsnamed import✅ standard | ✅ v1.1.0以来 | →B＆W | NO_COLORFORCE_COLOR--no-color--color | |||||
kleur✅ named import✅ standard | 8色 | ✅ | →B＆W | NO_COLORFORCE_COLOR |
注記
名前付きインポート
ESM
import { red, green, blue } from 'lib';
CJS
const { red, green, blue } = require('lib');色の名前
- 標準：色
bgRedBrightredBright標準名がありbgRedred- 非標準：色に
brightRedlib固有の名前red_bttありbgBrightRedred_bANSI 256色
メソッド名：
colors-cli：x<n>cli-color：xterm(n)chalk：ansi256(n)bgAnsi256(n)ansis：ansi256(n)bgAnsi256(n)fg(n)bg(n)Truecolor
メソッド名：
chalk：hex()rgb()ansis：hex()rgb()チェーンされた構文
lib.red.bold('text')ネストされたテンプレート文字列
lib.red`text ${lib.cyan`nested`} text`改行
end-of-lineの正しいブレイクスタイル。lib.bgGreen(`First Line Next Line`);
| NPMパッケージ | ターボールサイズをダウンロードします | 未払いのサイズ | コードサイズ |
|---|---|---|---|
picocolors | 2.6 kb | 6.4 kb | 2.6 kb |
ansis | 3.8 kb | 7.4 kb | 3.4 kb |
colorette | 4.9 kb | 17.0 kb | 3.4 kb |
kleur | 6.0 kb | 20.3 kb | 2.7 kb |
ansi-colors | 8.5 kb | 26.1 kb | 5.8 kb |
kolorist | 8.7 kb | 51.0 kb | 6.8 kb |
colors.js | 11.0 kb | 39.5 kb | 18.1 kb |
chalk | 13.1 kb | 43.7 kb | 16.4 kb |
cli-color | 13.8（216 kb） | 39.6（754 kb） | 12.1 kb |
colors-cli | 361.7 kb | 511.0 kb | 8.7 kb |
ダウンロードサイズ： NPMパッケージのGZIPTサイズ。
未解決のサイズ： node_modules/ディレクトリのNPMパッケージのサイズ(incl. dependencies) 。
コードサイズ：アプリにrequireまたはimportを介してロードされる分散コードのサイズ。
参照：
git clone https://github.com/webdiscus/ansis.git
cd ./ansis
npm i
npm run demoパフォーマンスを測定するには、benchmark.jsが使用されます。
警告
vitest benchmark False/ Unrealの結果を生成します。
たとえば、単純なベンチの結果：
chalk.red('foo') - 7.000.000 ops/sec
ansis.red('foo') - 23.000.000 ops/sec (x3 faster is WRONG result)
このテストでのチョークとANSIの実際のパフォーマンス結果は非常に似ています。
git clone https://github.com/webdiscus/ansis.git
cd ./ansis
npm i
npm run build
npm run benchでテストされています
MacBook Pro 16 "M1 Max 64GB
MacOS Secoia 15.1
node.js v22.11.0
端子iTerm2v3.5.0
注記
テストでは、各ライブラリは、各ライブラリの絶対パフォーマンスを比較するために利用可能な最速のスタイリング方法を使用しています。
実際の練習では、ライブラリがより速く、より短い鎖のメソッドを提供するときに、最も遅い方法（ネストされた呼び出しなど）を使用して文字列をスタイリングする人はいません。
例えば：
lib . red . bold . bgWhite ( ' ERROR ' ) // ✅ faster, shorter, readable
lib . red ( lib . bold ( lib . bgWhite ( ' ERROR ' ) ) ) // slower, longer, unreadable簡単なテストでは、単一のスタイルのみを使用します。 Picocolors、Colorette、およびKleurは、チェーンされた構文や正しいスタイルの切れ目（文字列で`n`を使用）をサポートしていないため、この単純なユースケースで最も速いです。機能なし、パフォーマンスオーバーヘッドはありません。
ansis . red ( 'foo' )
chalk . red ( 'foo' )
picocolors . red ( 'foo' )
. . . + [email protected] 109.212.939 ops/sec
[email protected] 108.044.800 ops/sec
[email protected] 87.800.739 ops/sec
- > [email protected] 60.606.043 ops/sec -44.5%
- [email protected] 55.702.479 ops/sec -48.9%
[email protected] 37.069.069 ops/sec
[email protected] 14.364.378 ops/sec
[email protected] 7.060.583 ops/sec
[email protected] 2.753.751 ops/sec
[email protected] 897.746 ops/sec2つのスタイルのみを使用して、ピコラーはすでに少し遅くなります。なぜなら、チェーンの構文を使用するとネストされた呼び出しよりも高速です。
ansis . red . bold ( 'foo' )
chalk . red . bold ( 'foo' )
picocolors . red ( picocolors . bold ( 'foo' ) ) // chained syntax is not supported
. . . + [email protected] 60.468.181 ops/sec
- [email protected] 58.777.183 ops/sec -2.8%
- [email protected] 47.789.020 ops/sec -21.5%
[email protected] 33.387.988 ops/sec
[email protected] 13.420.047 ops/sec
[email protected] 5.972.681 ops/sec
[email protected] 4.086.412 ops/sec
[email protected] 3.018.244 ops/sec
[email protected] 1.817.039 ops/sec
[email protected] 695.601 ops/sec3つのスタイルを使用して、PicocolorsはANSISよりも2倍遅いです。
ansis . red . bold . bgWhite ( 'foo' )
chalk . red . bold . bgWhite ( 'foo' )
picocolors . red ( picocolors . bold ( picocolors . bgWhite ( 'foo' ) ) ) // chained syntax is not supported
. . . + [email protected] 59.463.640 ops/sec
- [email protected] 42.166.783 ops/sec -29.0%
- [email protected] 32.434.017 ops/sec -45.5% (~2x slower than Ansis)
[email protected] 13.008.117 ops/sec
[email protected] 5.608.244 ops/sec
[email protected] 5.268.630 ops/sec
[email protected] 2.145.517 ops/sec
[email protected] 1.686.728 ops/sec
[email protected] 1.453.611 ops/sec
[email protected] 590.467 ops/secまれに、4つのスタイルを使用する場合、PicocolorsはANSIより3.4倍遅くなります。
ansis . red . bold . underline . bgWhite ( 'foo' )
chalk . red . bold . underline . bgWhite ( 'foo' )
picocolors . red ( picocolors . bold ( picocolors . underline ( picocolors . bgWhite ( 'foo' ) ) ) ) // chained syntax is not supported
. . . + [email protected] 59.104.535 ops/sec
- [email protected] 36.147.547 ops/sec -38.8%
- [email protected] 17.581.709 ops/sec -70.2% (~3x slower than Ansis)
[email protected] 7.981.171 ops/sec
[email protected] 4.825.665 ops/sec
[email protected] 3.729.880 ops/sec
[email protected] 1.514.053 ops/sec
[email protected] 1.229.999 ops/sec
[email protected] 1.210.931 ops/sec
[email protected] 481.073 ops/sec深くネストされたシングルスタイルを備えた複雑なテスト。
c . green (
`green ${ c . cyan (
`cyan ${ c . red (
`red ${ c . yellow (
`yellow ${ c . blue (
`blue ${ c . magenta ( `magenta ${ c . underline ( `underline ${ c . italic ( `italic` ) } underline` ) } magenta` ) } blue` ,
) } yellow` ,
) } red` ,
) } cyan` ,
) } green` ,
) + [email protected] 1.110.056 ops/sec
- [email protected] 1.073.299 ops/sec
- > [email protected] 847.246 ops/sec -23.7%
[email protected] 847.110 ops/sec
- [email protected] 573.942 ops/sec -48.3%
[email protected] 471.285 ops/sec
[email protected] 439.588 ops/sec
[email protected] 382.862 ops/sec
[email protected] 213.351 ops/sec
[email protected] 41.097 ops/secシングルスタイルのためにcoloretteで使用されるベンチマーク。
c . red ( ` ${ c . bold ( ` ${ c . cyan ( ` ${ c . yellow ( 'yellow' ) } cyan` ) } ` ) } red` ) + [email protected] 3.861.384 ops/sec
[email protected] 3.815.039 ops/sec
- > [email protected] 2.918.269 ops/sec -24.4%
[email protected] 2.548.564 ops/sec
- [email protected] 2.502.850 ops/sec -35.2%
[email protected] 2.229.023 ops/sec
[email protected] 1.426.279 ops/sec
[email protected] 1.123.139 ops/sec
[email protected] 481.708 ops/sec
[email protected] 114.570 ops/secわずかに変更されたpicocolorsベンチマーク。 1つではなく、色付きの単語に2つのスタイルを適用することにより、もう少し複雑さを追加しました。
let index = 1e8 ;
c . red ( '.' ) +
c . yellow ( '.' ) +
c . green ( '.' ) +
c . red . bold ( ' ERROR ' ) +
c . red ( 'Add plugin ' + c . cyan . underline ( 'name' ) + ' to use time limit with ' + c . cyan ( ++ index ) ) ; + [email protected] 2.601.559 ops/sec
- > [email protected] 2.501.227 ops/sec -3.8%
[email protected] 2.326.491 ops/sec
- [email protected] 2.129.106 ops/sec -18.1%
[email protected] 1.780.496 ops/sec
[email protected] 1.685.703 ops/sec
[email protected] 838.542 ops/sec
[email protected] 533.362 ops/sec
[email protected] 287.558 ops/sec
[email protected] 97.463 ops/sec注記
実際の使用に近いこのテストでは、各ライブラリは利用可能な最速のスタイリング方法を使用しています。
したがって、 chalk 、 ansis 、 ansi-colors 、 cli-color 、 colors-cli 、およびcolors 、 c.red.bold(' ERROR ')などのチェーンメソッドを使用します。 picocolors 、 colorette 、 koloristネストされた呼び出しを使用します。例えば、 c.red(c.bold(' ERROR '))使用します。
ANSISは、多くの同様のライブラリにコード移行を必要としない、強力で小さく、高速な交換です。
import ... from ...またはrequire(...)をansisに交換してください。
- import chalk from 'chalk';
+ import chalk from 'ansis';ANSISはチョークの構文をサポートし、スタイルとカラー名と互換性がある*ため、元のコードを変更する必要はありません。
chalk . red . bold ( 'Error!' ) ;
// colorize "Error: file not found!"
chalk . red ( `Error: ${ chalk . cyan . bold ( 'file' ) } not found!` ) ;
// ANSI 256 colors
chalk . ansi256 ( 93 ) ( 'Violet color' ) ;
chalk . bgAnsi256 ( 194 ) ( 'Honeydew, more or less' ) ;
// truecolor
chalk . hex ( '#FFA500' ) . bold ( 'Bold orange color' ) ;
chalk . rgb ( 123 , 45 , 67 ) . underline ( 'Underlined reddish color' ) ;
chalk . bgHex ( '#E0115F' ) ( 'Ruby' ) ;
chalk . bgHex ( '#96C' ) ( 'Amethyst' ) ; 警告
ANSISは、広くサポートされておらず、誰もそれを使用していないため、 overlineスタイルをサポートしていません。
コードを確認し、 overlineスタイルを削除します。
- chalk.red.overline('text');
+ chalk.red('text');オプションで、同じコードを書き換えて、さらに短くてきれいにすることができます。
import { red , cyan , ansi256 , bgAnsi256 , fg , bg , hex , rgb , bgHex , bgRgb } from 'ansis' ;
red . bold ( 'Error!' ) ; // using parentheses
red . bold `Error!` ; // using template string
// colorize "Error: file not found!"
red `Error: ${ cyan . bold `file` } not found!` ;
// ANSI 256 colors
ansi256 ( 93 ) `Violet color` ;
bgAnsi256 ( 194 ) `Honeydew, more or less` ;
fg ( 93 ) `Violet color` ; // alias for ansi256
bg ( 194 ) `Honeydew, more or less` ; // alias for bgAnsi256
// truecolor
hex ( '#FFA500' ) . bold `Bold orange color` ;
rgb ( 123 , 45 , 67 ) . underline `Underlined reddish color` ;
bgHex ( '#E0115F' ) `Ruby` ;
bgHex ( '#96C' ) `Amethyst` ; - import { red, bold, underline } from 'colorette';
+ import { red, bold, underline } from 'ansis'; ANSISはcoloretteスタイルとカラー名と完全に互換性があるため、元のコードを変更する必要はありません。
red . bold ( 'Error!' ) ;
bold ( `I'm ${ red ( `da ba ${ underline ( "dee" ) } da ba` ) } daa` ) ;オプションで、同じコードを書き換えて、さらに短くてきれいにすることができます。
red . bold `Error!` ;
bold `I'm ${ red `da ba ${ underline `dee` } da ba` } daa` ; - import pico from 'picocolors';
+ import pico from 'ansis'; ANSISは、 picocolorsスタイルとカラー名と完全に互換性があるため、元のコードを変更する必要はありません。
pico . red ( pico . bold ( 'text' ) ) ;
pico . red ( pico . bold ( variable ) ) ;
// colorize "Error: file not found!"
pico . red ( 'Error: ' + pico . cyan ( pico . bold ( 'file' ) ) + ' not found!' ) ;オプションで、同じコードを書き換えて、さらに短くてきれいにすることができます。
import { red , cyan } from 'ansis' ;
red . bold `text` ;
red . bold ( variable ) ;
// colorize "Error: file not found!"
red `Error: ${ cyan . bold `file` } not found!` - const c = require('ansi-colors');
+ const c = require('ansis'); ANSISはansi-colorスタイルとカラー名と完全に互換性があるため、元のコードを変更する必要はありません。
c . red . bold ( 'Error!' ) ;
// colorize "Error: file not found!"
c . red ( `Error: ${ c . cyan . bold ( 'file' ) } not found!` ) ;オプションで、同じコードを書き換えて、さらに短くてきれいにすることができます。
import { red , cyan } from 'ansis' ;
red . bold ( 'Error!' ) ; // using parentheses
red . bold `Error!` ; // using template string
// colorize "Error: file not found!"
red `Error: ${ cyan . bold `file` } not found!` ; - import { red, green, yellow, cyan } from 'kleur';
+ import { red, green, yellow, cyan } from 'ansis'; ANSISはkleur StylesとColor Nameと完全に互換性がありますが、Kleur v3.0チョークスタイルの構文（魔法のゲッター）を使用しなくなりました。
green ( ) . bold ( ) . underline ( 'this is a bold green underlined message' ) ;
yellow ( `foo ${ red ( ) . bold ( 'red' ) } bar ${ cyan ( 'cyan' ) } baz` ) ; Chained Methodを使用する場合は、単純なコード変更が必要です。 ().と. ：
green . bold . underline ( 'this is a bold green underlined message' ) ;
yellow ( `foo ${ red . bold ( 'red' ) } bar ${ cyan ( 'cyan' ) } baz` ) ;オプションで、同じコードを書き換えて、さらに短くてきれいにすることができます。
yellow `foo ${ red . bold `red` } bar ${ cyan `cyan` } baz` ; - const clc = require('cli-color');
+ const clc = require('ansis'); ANSISはcli-colorスタイルとカラー名と互換性があります。
clc . red . bold ( 'Error!' ) ;
// colorize "Error: file not found!"
clc . red ( `Error: ${ c . cyan . bold ( 'file' ) } not found!` ) ; 警告
ANSISはblinkスタイルをサポートしていません。なぜなら、それは広くサポートされておらず、誰もそれを使用していないからです。
コードをチェックして、 blinkスタイルを削除します。
- clc.red.blink('text');
+ clc.red('text'); ANSI 256 Color Functions xtermまたはbgXtermを使用する場合、これらはansi256 fnまたはbgAnsi256 bgに置き換える必要があります。
- clc.xterm(202).bgXterm(236)('Orange text on dark gray background');
+ clc.ansi256(202).bgAnsi256(236)('Orange text on dark gray background');オプションで、同じコードを書き換えて、さらに短くてきれいにすることができます。
import { red , cyan , fg , bg } from 'ansis' ;
red . bold `Error!` ;
// colorize "Error: file not found!"
red `Error: ${ cyan . bold `file` } not found!` ;
fg ( 202 ) . bg ( 236 ) `Orange text on dark gray background` ; npm run testユニットと統合テストを実行します。
npm run test:coverageカバレッジでテストを実行します。
ISC
サポートされている色は実際の端末に依存します。
Windowsターミナルは、Windows 10 Revision 14931（2016-09-21）以降の真の色をサポートしています。 ↩2
