上手初体验

刚开始上手时，推荐使用官方的脚手架创建项目，省时省心。

1. npx create-ink-app –typescript 

然后运行这样一段代码:

1. import React, { useState, useEffect } from 'react' 
2. import { render, Text} from 'ink' 
3.  
4. const Counter = () => { 
5.   const [count, setCount] = useState(0) 
6.   useEffect(() => { 
7.     const timer = setInterval(() => { 
8.       setCount(count => ++count) 
9.     }, 100) 
10.     return () => { 
11.       clearInterval(timer) 
12.     } 
13.      
14.   }) 
15.  
16.   return ( 
17.     <Text color="green"> 
18.       {count} tests passed 
19.     </Text> 
20.   ) 
21. } 
22.  
23. render(<Counter />); 

会出现如下的界面:

并且数字一直递增!demo 虽小，但足以说明问题:

1. 首先，这些文本输出都不是直接 console 出来的，而是通过 React 组件渲染出来的。
2. React 组件的状态管理以及hooks 逻辑放到命令行的 GUI 当中仍然是生效的。

也就是说，前端的能力以及扩展到了命令行窗口当中了，这无疑是一项非常可怕的能力。著名的文档生成工具Gatsby，包管理工具yarn2都使用了这项能力来完成终端 GUI 的搭建。

命令行工具项目实战

可能大家刚刚了解到这个工具，知道它的用途，但对于具体如何使用还是比较陌生。接下来让我们以一个实际的例子来进行实战，快速熟悉。代码仓库已经上传到 git，大家可以这个地址下面 fork 代码: https://github.com/sanyuan0704/ink-copy-command。

下面我们就来从头到尾开发这个项目。

项目背景

首先说一说项目的产生背景，在一个 TS 的业务项目当中，我们曾经碰到了一个问题：由于production模式下面，我们是采用先 tsc，拿到 js 产物代码，再用webpack打包这些产物。

但构建的时候直接报错了，原因就是 tsc 无法将 ts(x) 以外的资源文件移动到产物目录，以至于 webpack 在对于产物进行打包的时候，发现有些资源文件根本找不到!比如以前有这样一张图片的路径是这样—— src/asset/1.png，但这些在产物目录dist却没还有，因此 webpack 在打包 dist 目录下的代码时，会发现这张图片不存在，于是报错了。

解决思路

那如何来解决呢?

很显然，我们很难去扩展 tsc 的能力，现在最好的方式就是写个脚本手动将src下面的所有资源文件一一拷贝到dist目录，这样就能解决资源无法找到的问题。

一、拷贝文件逻辑

确定了解决思路之后，我们写下这样一段 ts 代码:

1. import { join, parse } from "path"; 
2. import { fdir } from 'fdir'; 
3. import fse from 'fs-extra' 
4. const staticFiles = await new fdir()  
5.   .withFullPaths()    
6.   // 过滤掉 node_modules、ts、tsx 
7.   .filter( 
8.     (p) => 
9.       !p.includes('node_modules') && 
10.       !p.endsWith('.ts') && 
11.       !p.endsWith('.tsx') 
12.   ) 
13.   // 搜索 src 目录 
14.   .crawl(srcPath) 
15.   .withPromise() as string[] 
16.  
17. await Promise.all(staticFiles.map(file => { 
18.   const targetFilePath = file.replace(srcPath, distPath); 
19.   // 创建目录并拷贝文件 
20.   return fse.mkdirp(parse(targetFilePath).dir) 
21.     .then(() => fse.copyFile(file, distPath)) 
22.    ); 
23. })) 

代码使用了fdir这个库才搜索文件，非常好用的一个库，写法上也很优雅，推荐大家使用。

我们执行这段逻辑，成功将资源文件转移到到了产物目录中。

问题是解决掉了，但我们能不能封装一下这个逻辑，让它能够更方便地在其它项目当中复用，甚至直接提供给其他人复用呢?

接着，我想到了命令行工具。