初衷
在平时工作中，总会不断地打开和切换浏览器的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
