试用一个使用类React组件化实现 Nodejs CLI 的框架

初衷

在平时工作中，总会不断地打开和切换浏览器的tab去处理工作流程上的事务，这是一种极大的切换消耗，所以一直想实现一个简易的工作信息板，减少切换动作。既然追求简单，所以想把它落地在一个terminal中。今天试用一个叫ink的框架。

React for CLIs. Build and test your CLI output using components.

GitHub - vadimdemedes/ink: ? React for interactive command-line apps

脚手架工具生成ink项目

安装脚手架工具

npm install --global yo generator-ink-cli
复制代码

初始化ink项目

~/code/search/react » yo ink-cli                                                   
? What do you want to name your module? rouboworks
? What is your module description? work spaces for roubo
? What is your GitHub username? roubo
? What is the URL of your website? http://blog.airoubo.com
? Do you need code coverage? No
复制代码

修改为 webpack 打包该项目

由于node.js目前还是commonjs语法，为了统一到ES6，也是由于喜爱的Vue和RN都已经是ES6，为了统一脑细胞，所以加入webpack来加载babel，实现ES6到commonjs的编译。

npm install --save-dev webpack babel-loader babel-preset-es2015 babel-preset-stage-0 babel-preset-react @babel/plugin-transform-react-jsx @babel/preset-env @babel/core
复制代码

以上其实安装了babel的两个不同的大版本，这个主要是要看使用的webpack是否版本>2.0， 这个过程其实遇到了挺多的坑。具体的设置可以看webpack配置：

// webpack.config.js
'use strict';

const webpack = require('webpack');
const path = require('path')

let externals = _externals();

module.exports = {
	mode: "development",
	entry: {
        app: './app.js',
    },
    target: 'node',
    output: {
        path: path.resolve(__dirname, './build'),
        filename: 'app.js'
    },
    resolve: {
        extensions: ['.js']
    },

    externals: externals,
    node: {
        console: true,
        global: true,
        process: true,
        Buffer: true,
        __filename: true,
        __dirname: true,
        setImmediate: true
    },
    module: {
		rules: [
            {
                test: /\.js$/,
				use: {
					loader: 'babel-loader',
                	options: {
						presets: [['@babel/preset-env', {
							"targets" : {
								"node" : "current"
							}
						}]]
					}
				},
                exclude: /node_modules/
            }
        ]
    },
};

function _externals() {
    let manifest = require('./package.json');
    let dependencies = manifest.dependencies;
    let externals = {};
    for (let p in dependencies) {
        externals[p] = 'commonjs ' + p;
    }
    return externals;
}
复制代码

.babelrc文件也需要配置如下，不然会报错找不到React组件。

{
  "plugins": [["@babel/plugin-transform-react-jsx", {"pragma":"h"}]]
}
复制代码

至此，运行webpack -p 可编译出来 build/app.js, 直接node build/app.js可以运行。

~/code/search/rouboworks(branch:master) » node build/app.js                                              
I love ink
复制代码

试用下它的组件

import {
	h, Component, Color, Bold, Fragment
} from 'ink'

import {Tabs, Tab} from 'ink-tab'
import Divider from 'ink-divider'
import {Select} from 'ink-select'

export default class UI extends Component {

	constructor(props) {
		super(props)
		this.state = {
			activeTabName: null,
			todolist : [
				{
					label: "试用ink组件",
					value: 1,
				},
				{
					label: "基于终端的窗口",
					value: 2,
				}
			],
			doinglist : [
				{
					label: "搭建ink组件",
					value: 1,
				}
			],
			donelist : [
				{
					label: "安装ink组件",
					value: 1,
				}
			],
			releaselist : null

		}
	}

	_onChangeTab = (name, activeTab) => {
		this.setState({
			activeTabName: name
		})
	}

	_renderTable = () => {
		let tabledata = null
		switch (this.state.activeTabName) {
			case "todo"	:
				tabledata = this.state.todolist
				break
			case "doing":
				tabledata = this.state.doinglist
				break
			case "done":
				tabledata = this.state.donelist
				break
			case "release":
				tabledata = this.state.releaselist
				break
			default:
				tabledata = null
				break
		}
		if(tabledata) {
			return (
				<div>
					<Select options={tabledata}/>
					<br/>
					<Divider width={100} padding={0} dividerChar="-" dividerColor="green"/>
				</div>
			)
		}else{
			return (
				<Color red>暂无数据</Color>
			)
		}
	}
	render() {
		return (
			<div>
				<Divider width={100} padding={0} dividerChar="-" dividerColor="green"/>
				<Tabs onChange={this._onChangeTab}>
					<Tab name={"todo"}>todo</Tab>
					<Tab name={"doing"}>doing</Tab>
					<Tab name={"done"}>done</Tab>
					<Tab name={"release"}>release</Tab>
				</Tabs>
				<br/>
				<Divider width={100} padding={0} dividerChar="-" dividerColor="green"/>
				<div>
					{this._renderTable()}
				</div>
			</div>

		);
	}
}
复制代码

效果

GitHub - roubo/rouboworks: 基于Nodejs CLI的工作面板