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. TensorFlow.js之安装与核心概念

    TensorFlow.js是通过WebGL加速.基于浏览器的机器学习js框架.通过tensorflow.js,我们可以在浏览器中开发机器学习.运行现有的模型或者重新训练现有的模型. 一.安装     ...

  2. SQL Server性能优化(7)理解数据库文件组织

    一.基本单位"页"     SQL Server是用8KB的页来存储数据.物理I/O操作也是在页级执行.页的种类有很多,具体参考(MSDN).我们关注更多的是数据页的结构,包括三部 ...

  3. -webkit-CSS属性拾遗

    -webkit-input-placeholder 这个伪类用于设置输入框placeholder文字的样式,基本可以设置例子如下: input::-webkit-input-placeholder { ...

  4. 磁盘分区(20G升50G)

      不多说,直接上干货! 本博文的主要内容有 .磁盘分区的概述 .常用的磁盘管理工具    ./下分5G,给/home扩容    .系统自带的fdisk和parted这两款工具 .磁盘空间管理 前言 ...

  5. Spring Cloud 使用 FeignClient 启动报错

    我们首先来看一下报错信息 Description: Field businessFeignClient in com.ysc.service.BusinessConfigService require ...

  6. Hadoop2源码分析-RPC机制初识

    1.概述 上一篇博客,讲述Hadoop V2的序列化机制,这为我们学习Hadoop V2的RPC机制奠定了基础.RPC的内容涵盖的信息有点多,包含Hadoop的序列化机制,RPC,代理,NIO等.若对 ...

  7. Spring Boot 解决方案 - JUnit 测试

    简单的 JUnit 项目 回顾一下创建并运行简单的 JUnit 测试项目,先添加 JUnit 依赖然后编写类似如下模板的测试类,使用 IDE 的话直接用插件运行就行, 使用 Maven 的话运行命令 ...

  8. 第三方登录:微信扫码登录(OAuth2.0)

    1.OAuth2.0 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. 允许用户提供 ...

  9. java入门,学习笔记

    编译 通过javac编译java程序,会编译出一个后缀为class的文件,我们再通过java虚拟机(jvm)执行编译后的java程序. 在java中始终有一个main函数,它作为程序的入口,程序从这个 ...

  10. 工厂模式——java设计模式

    工厂模式 目录 何为工厂模式 工厂方法与抽象工厂 如何在Java EE中通过@Producers与@Inject注解实现工厂模式 如何创建自定义注解以及通过@Qualifier消除具体实现之间的歧义 ...