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文档!!!)
Ink——一款使用React风格开发命令行界面应用(CLI App)的nodejs工具的更多相关文章
- React Native开发技术周报1
(一).资讯 1.React Native 0.21版本发布,最新版本功能特点,修复的Bug可以看一下已翻译 重要:如果升级 Android 项目到这个版本一定要读! 我们简化了 Android 应用 ...
- 10款让WEB前端开发人员更轻松的实用工具
这篇文章介绍10款让Web前端开发人员生活更轻松的实用工具.每个Web开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具,所以如 ...
- 十款让 Web 前端开发人员更轻松的实用工具
这篇文章介绍十款让 Web 前端开发人员生活更轻松的实用工具.每个 Web 开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具, ...
- 【转】十款让 Web 前端开发人员更轻松的实用工具
这篇文章介绍十款让 Web 前端开发人员生活更轻松的实用工具.每个 Web 开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具, ...
- React Native开发技术周报2
(1).资讯 1.React Native 0.22_rc版本发布 添加了热自动重载功能 (2).技术文章 1.用 React Native 设计的第一个 iOS 应用 我们想为用户设计一款移动端的应 ...
- [转] React风格的企业前端技术
亲爱的各位朋友们,大家下午好! 首先祝大家国庆节快乐! 很高兴可以在国庆前夕,可以为大家分享一下React风格的企业前端技术. 谈到前端,可能以前大家的第一感觉就是,前端嘛,无非就是做做页面切图,顶多 ...
- React Native开发入门
目录: 一.前言 二.什么是React Native 三.开发环境搭建 四.预备知识 五.最简单的React Native小程序 六.总结 七.参考资料 一.前言 虽然只是简单的了解了一下Reac ...
- React Native 开发之 (02) 用Sublime 3作为React Native的开发IDE
Sublime Text是一个代码编辑器.也是HTML和散文先进的文本编辑器.漂亮的用户界面和非凡的功能,例如:迷你地图,多选择Python插件,代码段等等.完全可自定义键绑定,菜单和工具栏等等.漂亮 ...
- React组件开发(一)初识React
*React不属于MVC.MVVM,只是单纯的V层. *React核心是组件(提高代码复用率.降低测试难度.代码复杂度). *自动dom操作,状态对应内容. *React核心js文件:react.js ...
随机推荐
- TensorFlow.js之安装与核心概念
TensorFlow.js是通过WebGL加速.基于浏览器的机器学习js框架.通过tensorflow.js,我们可以在浏览器中开发机器学习.运行现有的模型或者重新训练现有的模型. 一.安装 ...
- SQL Server性能优化(7)理解数据库文件组织
一.基本单位"页" SQL Server是用8KB的页来存储数据.物理I/O操作也是在页级执行.页的种类有很多,具体参考(MSDN).我们关注更多的是数据页的结构,包括三部 ...
- -webkit-CSS属性拾遗
-webkit-input-placeholder 这个伪类用于设置输入框placeholder文字的样式,基本可以设置例子如下: input::-webkit-input-placeholder { ...
- 磁盘分区(20G升50G)
不多说,直接上干货! 本博文的主要内容有 .磁盘分区的概述 .常用的磁盘管理工具 ./下分5G,给/home扩容 .系统自带的fdisk和parted这两款工具 .磁盘空间管理 前言 ...
- Spring Cloud 使用 FeignClient 启动报错
我们首先来看一下报错信息 Description: Field businessFeignClient in com.ysc.service.BusinessConfigService require ...
- Hadoop2源码分析-RPC机制初识
1.概述 上一篇博客,讲述Hadoop V2的序列化机制,这为我们学习Hadoop V2的RPC机制奠定了基础.RPC的内容涵盖的信息有点多,包含Hadoop的序列化机制,RPC,代理,NIO等.若对 ...
- Spring Boot 解决方案 - JUnit 测试
简单的 JUnit 项目 回顾一下创建并运行简单的 JUnit 测试项目,先添加 JUnit 依赖然后编写类似如下模板的测试类,使用 IDE 的话直接用插件运行就行, 使用 Maven 的话运行命令 ...
- 第三方登录:微信扫码登录(OAuth2.0)
1.OAuth2.0 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. 允许用户提供 ...
- java入门,学习笔记
编译 通过javac编译java程序,会编译出一个后缀为class的文件,我们再通过java虚拟机(jvm)执行编译后的java程序. 在java中始终有一个main函数,它作为程序的入口,程序从这个 ...
- 工厂模式——java设计模式
工厂模式 目录 何为工厂模式 工厂方法与抽象工厂 如何在Java EE中通过@Producers与@Inject注解实现工厂模式 如何创建自定义注解以及通过@Qualifier消除具体实现之间的歧义 ...