Node series-005-colors.js

After connecting to commander.js and Inquirer.js , it should be directly connected to colors.js . After all, we are now the console output, the console does not make it flamboyant (bells and whistles).

But the first article Inquires.js too powerful, and it directly added 1.7w words, so relatively speaking, this article is a bit short.

Reading tips: This article is a little short and easy to read, and the next one will be bigger, so I don’t accept complaints~

I. Introduction

colors.js is a 4.1k star (2021-06-16) warehouse made by Marak.

Connecting to colors.js can make your console more explosive and more beautiful.

• Installation: npm i colors
• Enter code:

src/index.ts

import program from 'commander';
import common from './common';
import colors from 'colors';

program
  .version('0.0.1')
  .description('工具库')

program
  .command('jsliang')
  .description('jsliang 帮助指令')
  .action(() => {
    common();
  });

program
  .command('test')
  .description('测试频道')
  .action(() => {
    const text = `
      _   _____   _       _       ___   __   _   _____  
     | | /  ___/ | |     | |     /   | |  \\ | | /  ___| 
     | | | |___  | |     | |    / /| | |   \\| | | |     
  _  | | \\___  \\ | |     | |   / /—| | | |\\   | | |  _  
 | |_| |  ___| | | |___  | |  / /  | | | | \\  | | |_| |
 \\_____/ /_____/ |_____| |_| /_/   |_| |_|  \\_| \\_____/
    `;
    console.log(colors.rainbow(text));
  });

program.parse(process.argv);

package.json

{
  "name": "jsliang",
  "version": "1.0.0",
  "description": "Fe-util, Node 工具库",
  "main": "index.js",
  "scripts": {
    "jsliang": "ts-node ./src/index.ts jsliang",
    "test": "ts-node ./src/index.ts test"
  },
  "keywords": [
    "jsliang",
    "Node 工具库",
    "Node"
  ],
  "author": "jsliang",
  "license": "ISC",
  "devDependencies": {
    "@types/inquirer": "^7.3.1",
    "@types/node": "^15.12.2",
    "@typescript-eslint/eslint-plugin": "^4.26.1",
    "@typescript-eslint/parser": "^4.26.1",
    "eslint": "^7.28.0",
    "ts-node": "^10.0.0",
    "typescript": "^4.3.2"
  },
  "dependencies": {
    "colors": "^1.4.0",
    "commander": "^7.2.0",
    "inquirer": "^8.1.0",
    "rxjs": "^5.5.12"
  }
}

• Execute npm run test

Found that the console is old and beautiful:

In the above code, test related instructions have been added (the content of our test will be stuffed here in the follow-up, no need to add, but jsliang will be used as an example)

As for this beautiful font, it was converted by the ASCII Art Word Converter.

• Kalvin online tool
• ASCII glyph generator

Here you can recommend 2 at will, and more friends can dig on their own.

Two colors.js

If a worker wants to do well, he must first sharpen his tools.

In the above we show colors.js one kind of rainbow colors of colors.rainbow , then there will certainly be other colors.

import colors from 'colors';

console.log(colors.rainbow('rainbow'));
console.log(colors.black('black'));
console.log(colors.red('red'));
console.log(colors.green('green'));
console.log(colors.yellow('yellow'));
console.log(colors.blue('blue'));
console.log(colors.magenta('magenta'));
console.log(colors.cyan('cyan'));
console.log(colors.white('white'));
console.log(colors.gray('gray'));
console.log(colors.grey('grey'));
console.log(colors.bgBlack('bgBlack'));
console.log(colors.bgRed('bgRed'));
console.log(colors.bgGreen('bgGreen'));
console.log(colors.bgYellow('bgYellow'));
console.log(colors.bgBlue('bgBlue'));
console.log(colors.bgMagenta('bgMagenta'));
console.log(colors.bgCyan('bgCyan'));
console.log(colors.bgWhite('bgWhite'));
console.log(colors.bgGrey('bgGrey'));
console.log(colors.reset('reset'));
console.log(colors.bold('bold'));
console.log(colors.dim('dim'));
console.log(colors.italic('italic'));
console.log(colors.underline('underline'));
console.log(colors.inverse('inverse'));
console.log(colors.hidden('hidden'));
console.log(colors.strikethrough('strikethrough'));
console.log(colors.rainbow('rainbow'));
console.log(colors.zebra('zebra'));
console.log(colors.america('america'));
console.log(colors.trap('trap'));
console.log(colors.random('random'));

test them into 060d28092457f3 and execute npm run test to get fancy prints:

Three rewrite console.log

colors on the above, if you have to quote 060d280924586d every time you print, then it's a bit unreasonable.

So let's rewrite console.log so that as long as there is a place to use it, we will have rainbow colors!

base/getType.ts

/**
 * @name getType
 * @description 获取类型
 * @param {string|object} param 传入的变量
 */
export const getType = (param: string): string => {
  return Object.prototype.toString.call(param).slice(8, -1);
};

base/console.ts

import colors from 'colors';
import { getType } from './getType';

// 打印索引
let consoleIndex = 1;

// 重写 console.log
const log = console.log;
console.log = (...args: any) => {
  log(`\n---${consoleIndex++}---`);
  for (let i = 0; i < args.length; i++) {
    const arg = args[i];
    if (['String', 'Number', 'Boolean'].includes(getType(arg))) {
      log(colors.rainbow(String(arg)));
    } else {
      log(arg);
    }
  }
};

// 重写 console.error
const error = console.error;
console.error = (...args: any) => {
  log(`\n---${consoleIndex++}---`);
  for (let i = 0; i < args.length; i++) {
    const arg = args[i];
    if (['String', 'Number', 'Boolean'].includes(getType(arg))) {
      error(colors.red(String(arg)));
    } else {
      error(arg);
    }
  }
};

Then src/index.ts refer to this rewriting of console.ts , so you can use globally to:

src/index.ts

import program from 'commander';
import common from './common';
import './base/console';

program
  .version('0.0.1')
  .description('工具库')

program
  .command('jsliang')
  .description('jsliang 帮助指令')
  .action(() => {
    common();
  });

program
  .command('test')
  .description('测试频道')
  .action(() => {
    console.log('There is jsliang?', true);
    console.error('随便报个错，表明它有问题');
  });

program.parse(process.argv);

At this time, the print effect of npm run test

In fact, the rainbow color looks too fancy, but don’t change it for the time being, friends can change the color by themselves

So, the fancy and fancy access is over. Although they are all API copy and paste engineers, it is still possible to make decorations and look good~

See you in the next article!

Four references

• GitHub：Marak/colors.js
• Kalvin online tool
• ASCII glyph generator

---

does not toss the front end, what is the difference with the salted fish!

jsliang's document library is by 160d2809245d44 Liang Junrong with Creative Commons Attribution-Non-Commercial Use-Same Way Sharing 4.0 International License Agreement . <br/>Based on the works https://github.com/LiangJunrong/document-library <br/> addition to this license may be authorized usage rights from https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ obtained at.