使用blessed 开发丰富的cli 应用
blessed 是一个不错的npm 包,可以帮助我们开发出带有丰富ui界面的cli 应用,类似的有subzero
测试环境准备
- 项目结构
├── README.md
├── app.js
├── my-program-icon.png
├── package.json
└── yarn.lock
- package.json 说明
主要是依赖以及打包npm 的配置
{
"name": "blessed-project",
"version": "1.0.0",
"main": "index.js",
"bin": "app.js",
"license": "MIT",
"dependencies": {
"blessed": "^0.1.81"
},
"scripts": {
"start": "node app",
"build": "pkg ."
},
"pkg": {
"scripts": "app.js"
},
"devDependencies": {
"pkg": "^4.3.4"
}
}
- app.js
简单的cli 开发代码,来自官方文档
var blessed = require('blessed');
// Create a screen object.
var screen = blessed.screen({
smartCSR: true
});
screen.title = 'blessed test';
// Create a box perfectly centered horizontally and vertically.
var box = blessed.box({
top: 'center',
left: 'center',
width: '50%',
height: '50%',
content: 'hello blessed {bold}world{/bold}!',
tags: true,
border: {
type: 'line'
},
style: {
fg: 'white',
bg: 'magenta',
border: {
fg: '#f0f0f0'
},
hover: {
bg: 'green'
}
}
});
// Append our box to the screen.
screen.append(box);
// Add a png icon to the box
var icon = blessed.image({
parent: box,
top: 0,
left: 0,
type: 'overlay',
width: 'shrink',
height: 'shrink',
file: __dirname + '/my-program-icon.png',
search: false
});
// If our box is clicked, change the content.
box.on('click', function(data) {
box.setContent('{center}Some different {red-fg}content{/red-fg}.{/center}');
screen.render();
});
// If box is focused, handle `enter`/`return` and give us some more content.
box.key('enter', function(ch, key) {
box.setContent('{right}Even different {black-fg}content{/black-fg}.{/right}\n');
box.setLine(1, 'bar');
box.insertLine(1, 'foo');
screen.render();
});
// Quit on Escape, q, or Control-C.
screen.key(['escape', 'q', 'C-c'], function(ch, key) {
return process.exit(0);
});
// Focus our element.
box.focus();
// Render the screen.
screen.render();
运行
- 直接使用node
node app
or
yarn start
- 使用二进制文件
pkg 打包的二进制文件
yarn build
linux && mac
./blessed-project-{linux|mac}
windows
blessed-project-win.exe
- 效果
说明
使用blessed 我们可以开发出支持丰富界面的cli工具,集成oclif 很更强大,同时也有一个直接可以使用vue react 的插件,这样开发就更简单了