Ink——一款使用React風格開發命令列應用的nodejs工具

標籤：tput   mis   img   ext   timer   點擊   make   load   his   

 

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: 015         };16     }17 18     render() {19         return (20             <div>21                 <Text red>22                     The virus has been resolve...23                 </Text>24                 <br/>25                 <ProgressBar26                     char="x"27                     percent={this.state.i}28                     left={5}29                     right={0}30                     green31                 />32                 <br/>33                 <Text green>34                     loading...{35                         parseInt(this.state.i * 100) < 100 ? parseInt(this.state.i * 100) : 10036                     }%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.149                     });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文檔！！！）

 

 

 

Ink——一款使用React風格開發命令列應用的nodejs工具