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文档!!!)

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

  1. React Native开发技术周报1

    (一).资讯 1.React Native 0.21版本发布,最新版本功能特点,修复的Bug可以看一下已翻译 重要:如果升级 Android 项目到这个版本一定要读! 我们简化了 Android 应用 ...

  2. 10款让WEB前端开发人员更轻松的实用工具

    这篇文章介绍10款让Web前端开发人员生活更轻松的实用工具.每个Web开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具,所以如 ...

  3. 十款让 Web 前端开发人员更轻松的实用工具

    这篇文章介绍十款让 Web 前端开发人员生活更轻松的实用工具.每个 Web 开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具, ...

  4. 【转】十款让 Web 前端开发人员更轻松的实用工具

    这篇文章介绍十款让 Web 前端开发人员生活更轻松的实用工具.每个 Web 开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具, ...

  5. React Native开发技术周报2

    (1).资讯 1.React Native 0.22_rc版本发布 添加了热自动重载功能 (2).技术文章 1.用 React Native 设计的第一个 iOS 应用 我们想为用户设计一款移动端的应 ...

  6. [转] React风格的企业前端技术

    亲爱的各位朋友们,大家下午好! 首先祝大家国庆节快乐! 很高兴可以在国庆前夕,可以为大家分享一下React风格的企业前端技术. 谈到前端,可能以前大家的第一感觉就是,前端嘛,无非就是做做页面切图,顶多 ...

  7. React Native开发入门

    目录: 一.前言 二.什么是React Native 三.开发环境搭建 四.预备知识 五.最简单的React Native小程序 六.总结 七.参考资料   一.前言 虽然只是简单的了解了一下Reac ...

  8. React Native 开发之 (02) 用Sublime 3作为React Native的开发IDE

    Sublime Text是一个代码编辑器.也是HTML和散文先进的文本编辑器.漂亮的用户界面和非凡的功能,例如:迷你地图,多选择Python插件,代码段等等.完全可自定义键绑定,菜单和工具栏等等.漂亮 ...

  9. React组件开发(一)初识React

    *React不属于MVC.MVVM,只是单纯的V层. *React核心是组件(提高代码复用率.降低测试难度.代码复杂度). *自动dom操作,状态对应内容. *React核心js文件:react.js ...

随机推荐

  1. (转)python-user-agents

    原文:http://blog.topspeedsnail.com/archives/1958 Python3网络爬虫(四):使用User Agent和代理IP隐藏身份-------https://bl ...

  2. C++ STL基本容器的使用(vector、list、deque、map、stack、queue)

    1.关联容器和顺序容器 C++中有两种类型的容器:顺序容器和关联容器,顺序容器主要有:vector.list.deque等.关联容器主要有map和set.如下图: 1.vector基本使用 #incl ...

  3. 读书笔记(03) - 性能 - JavaScript高级程序设计

    作用域链查找 作用域链的查找是逐层向上查找.查找的层次越多,速度越慢.随着硬件性能的提升和浏览器引擎的优化,这个慢我们基本可以忽略. 除了层级查找损耗的问题,变量的修改应只在局部环境进行,尽量避免在局 ...

  4. 全网最详细的启动zkfc进程时,出现INFO zookeeper.ClientCnxn: Opening socket connection to server***/192.168.80.151:2181. Will not attempt to authenticate using SASL (unknown error)解决办法(图文详解)

    不多说,直接上干货! at org.apache.zookeeper.ClientCnxnSocketNIO.doTransport(ClientCnxnSocketNIO.java:) at org ...

  5. GO入门——5. 函数

    1 函数 Go 函数 不支持 嵌套.重载和默认参数 定义函数使用关键字 func,且左大括号不能另起一行 函数也可以作为一种类型使用 无需声明原型 不定长度变参 func A(a string,c . ...

  6. Jenkins-pipeline的实现步骤

    jenkins实现持续集成 搭建jenkins环境,安装插件 建立pipeline公用类库,文件夹vars,默认的 添加.groovy文件,可以由以下几个类库组成 dockerImageBuild 负 ...

  7. C/C++求职宝典21个重点笔记(常考笔试面试点)

    这是我之前准备找工作时看<C/C++求职宝典>一书做的笔记,都是一些笔试面试中常考的重点难点问题,但比较基础,适合初学者看. 1. char c = '\72'; 中的\72代表一个字符, ...

  8. 玩转mongodb(八):分布式计算--MapReduce

    MongoDB提供了MapReduce的聚合工具来实现任意复杂的逻辑,它非常强大,非常灵活.MapReduce使用JavaScript作为“查询语言”,能够在多台服务器之间并行执行.它会将一个大问题拆 ...

  9. com.alibaba.fastjson.JSON对类对象的序列化与反序列化

    1. 目标 把类的对象存储到字符串可存储 2. 类定义 public interface JsonInterface { } mport com.alibaba.fastjson.JSON; impo ...

  10. java arrayList vector 区别

    1. 关系图 List接口一共有三个实现类,分别是ArrayList.Vector和LinkedList 2. ArrayList.Vector和LinkedList区别 ArrayList是最常用的 ...