试用一个使用类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>

        );
    }
}

效果

image.png

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