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文档！！！）