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

web开发作者:dayu日期:11天前点击:6

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 toh. Don‘t forget to importhinto every file that contains JSX."

分享下我使用Ink做的项目:Ink-demo大家可以试着运行下~ (运行前,务必看下README.md文档!!!)

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

原文地址:http://www.cnblogs.com/tim100/p/7244151.html


下一篇       上一篇