共计 4496 个字符,预计需要花费 12 分钟才能阅读完成。
接入 commander.js
和 Inquirer.js
之后,本应该间接接上 colors.js
,毕竟咱们当初是控制台输入,控制台不搞得飘飘亮亮(花里胡哨的)。
然而上篇 Inquires.js
太给力了,间接上了 1.7w 字,所以相对而言,这篇就简短点呗。
浏览提醒:本篇文章略短,易读,下一篇再搞大的,不承受吐槽~
一 前言
colors.js
是 Marak 做的一个 4.1k star(2021-06-16)的仓库。
接入 colors.js
后能够让你的控制台更爆炸更有美感。
- 装置:
npm i colors
- 输出代码:
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"
}
}
- 执行
npm run test
发现控制台老丑陋了:
在下面代码中,增加了 test
相干指令(后续咱们测试内容就塞到这里,能够不必加,然而 jsliang 会拿来做示例用)
至于这个难看的字体,就是通过 ASCII 艺术字转换器转换过去的。
- Kalvin 在线工具
- ASCII 字形生成器
这边随便举荐 2 个,更多的小伙伴能够自行开掘。
二 colors.js
工欲善其事,必先利其器。
在下面咱们展现了 colors.js
中的一种彩虹色 colors.rainbow
,那么必定会有其余色彩。
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
中,执行 npm run test
,失去花里花哨的打印:
三 重写 console.log
OK,在下面咱们曾经富丽呼哨了,每次打印如果都要援用一遍 colors
那就有点说不过去啦。
所以咱们重写 console.log
,这样只有有中央用到它了咱们就有彩虹色了!
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);
}
}
};
而后在 src/index.ts
中援用这个重写的 console.ts
,这样全局就能够应用到了:
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);
这时候运行 npm run test
打印成果为:
其实彩虹色看起来太花里胡哨了,然而临时这边不更改吧,小伙伴们能够自行更换色彩
那么,花里花哨的接入就结束了,尽管都是 API 复制粘贴工程师,然而做下装璜搞好看一点还是能够有的~
下一篇见!
四 参考文献
- GitHub:Marak/colors.js
- Kalvin 在线工具
- ASCII 字形生成器
不折腾的前端,和咸鱼有什么区别!
jsliang 的文档库由 梁峻荣 采纳 常识共享 署名 - 非商业性应用 - 雷同形式共享 4.0 国内 许可协定 进行许可。<br/> 基于 https://github.com/LiangJunrong/document-library 上的作品创作。<br/> 本许可协定受权之外的应用权限能够从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处取得。