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 的外掛，這樣開發就更簡單了