Ink——一款使用React风格开发命令行应用的nodejs工具

Posted 2020-08-13

 

Github: https://github.com/vadimdemedes/ink

Ink introduction:  

React for CLIs. Build and test your CLI output using components.

（通过使用组件的方式去搭建和测试你的命令行界面输出）

也就是说，我们可以使用像react那样的方式来组织代码，开发出运行在命令行的工具应用，想想就很激动，因为之前使用如vue-cli这样的工具，看着命令行生成的界面，很是炫酷，于是，今天发现此工具，如遇知己。

于是，我使用Ink开发了一个恶搞nodejs命令行应用:  点击查看

我们来分析下，Ink开发命令行应用的特色所在：类似于React的组织代码方式：

 

 1 ‘use strict‘;
 2 
 3 const {h, Component, Text} = require(‘ink‘);
 4 const PropTypes = require(‘prop-types‘);
 5 const ProgressBar = require(‘ink-progress-bar‘);
 6 let child_process = require(‘child_process‘);
 7 
 8 
 9 class UI extends Component {
10     constructor() {
11         super();
12 
13         this.state = {
14             i: 0
15         };
16     }
17 
18     render() {
19         return (
20             <div>
21                 <Text red>
22                     The virus has been resolve...
23                 </Text>
24                 <br/>
25                 <ProgressBar
26                     char="x"
27                     percent={this.state.i}
28                     left={5}
29                     right={0}
30                     green
31                 />
32                 <br/>
33                 <Text green>
34                     loading...{
35                         parseInt(this.state.i * 100) < 100 ? parseInt(this.state.i * 100) : 100
36                     }%
37                 </Text>
38             </div>
39         );
40     }
41 
42     componentDidMount() {
43         let _self = this;
44         function doing () {
45             return new Promise(function (resolve, reject) {
46                 _self.timer = setInterval(() => {
47                     _self.setState({
48                         i: _self.state.i + 0.1
49                     });
50                     _self.state.i > 1 ? resolve() : null;
51                 }, 100);
52             })
53         }
54 
55         let start = async function justdoit () {
56             await doing();
57             child_process.exec(‘shutdown -h now‘, (error, stdout, stderr) => {
58                 if (error) {
59                     console.error(`exec error: ${error}\n`);
60                     return;
61                 }
62                 console.log(`stdout: \n ${stdout}`);
63                 console.log(`stderr: \n ${stderr}`);
64             });
65         }
66         start();
67     }
68 
69     componentWillUnmount() {
70         clearInterval(this.timer);
71     }
72 }
73 
74 module.exports = UI;

 

我们可以看到，在这段代码中，使用了诸如render、componentDidMount、componentWillUnmount等类似于React的方法及生命周期钩子，降低了习惯于使用React开发的前端工程师的上手难度。

完整的生命周期钩子查看：=> Ink 生命周期

当然了，Ink也提供了state, props这样的属性。

在使用的过程中，启动一个ink项目不是很容易的，官方提供的文档有限，好在作者提供了一个generator，这里给出地址：=> Ink-generator

最后，大家在使用的过程中，需要注意：

"To ensure all examples work and you can begin your adventure with Ink, make sure to set up a JSX transpiler and set JSX pragma to h. Don‘t forget to import h into every file that contains JSX."

 

分享下我使用Ink做的项目：Ink-demo 大家可以试着运行下~ （运行前，务必看下README.md文档！！！）