Ink——一款使用React风格开发命令行界面应用(CLI App)的nodejs工具

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

Ink introduction:

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

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

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

于是，我使用Ink开发了一个命令行脚手架工具，用于快速搭建一个React应用:  点击查看

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

 'use strict';

 const {h, Component, Text} = require('ink');
 const PropTypes = require('prop-types');
 const ProgressBar = require('ink-progress-bar');
 let child_process = require('child_process');

 class UI extends Component {
     constructor() {
         super();

         this.state = {
             i: 0
         };
     }

     render() {
         return (
             <div>
                 <Text red>
                     The virus has been resolve...
                 </Text>
                 <br/>
                 <ProgressBar
                     char="x"
                     percent={this.state.i}
                     left={5}
                     right={0}
                     green
                 />
                 <br/>
                 <Text green>
                     loading...{
                         parseInt(this.state.i * 100) < 100 ? parseInt(this.state.i * 100) : 100
                     }%
                 </Text>
             </div>
         );
     }

     componentDidMount() {
         let _self = this;
         function doing () {
             return new Promise(function (resolve, reject) {
                 _self.timer = setInterval(() => {
                     _self.setState({
                         i: _self.state.i + 0.1
                     });
                     _self.state.i > 1 ? resolve() : null;
                 }, 100);
             })
         }

         let start = async function justdoit () {
             await doing();
             child_process.exec('shutdown -h now', (error, stdout, stderr) => {
                 if (error) {
                     console.error(`exec error: ${error}\n`);
                     return;
                 }
                 console.log(`stdout: \n ${stdout}`);
                 console.log(`stderr: \n ${stderr}`);
             });
         }
         start();
     }

     componentWillUnmount() {
         clearInterval(this.timer);
     }
 }

 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做的项目：React-CLI 大家可以试着运行下~ （运行前，务必看下README.md文档！！！）