React 组件渲染在终端窗口中，展现出最终的命令行界面

刚开始上手时，保举行使官方的脚手架建设项目，省时省心。

npx create-ink-app --typescript 

然后运行这样一段代码:

import React, { useState, useEffect } from 'react' 

import { render, Text} from 'ink' 

const Counter = () => { 

  const [count, setCount] = useState(0) 

  useEffect(() => { 

    const timer = setInterval(() => { 

      setCount(count => ++count) 

    }, 100) 

    return () => { 

      clearInterval(timer) 

    } 

  }) 

  return ( 

    <Text color="green"> 

      {count} tests passed 

    </Text> 

  ) 

} 

render(<Counter />); 

会呈现如下的界面:

而且数字一向递增!demo 虽小，但足以声名题目:

起首，这些文本输出都不是直接 console 出来的，而是通过 React 组件渲染出来的。

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 代码:

import { join, parse } from "path"; 

import { fdir } from 'fdir'; 

import fse from 'fs-extra' 

const staticFiles = await new fdir()  

  .withFullPaths()    

  // 过滤掉 node_modules、ts、tsx 

  .filter( 

    (p) => 

      !p.includes('node_modules') && 

      !p.endsWith('.ts') && 

      !p.endsWith('.tsx') 

  ) 

  // 搜刮 src 目次 

  .crawl(srcPath) 

  .withPromise() as string[] 

await Promise.all(staticFiles.map(file => { 

  const targetFilePath = file.replace(srcPath, distPath); 

  // 建设目次并拷贝文件 

  return fse.mkdirp(parse(targetFilePath).dir) 

    .then(() => fse.copyFile(file, distPath)) 

   ); 

})) 

代码行使了fdir这个库才搜刮文件，很是好用的一个库，写法上也很优雅，保举各人行使。

我们执行这段逻辑，乐成将资源文件转移到到了产品目次中。

题目是办理掉了，但我们能不能封装一下这个逻辑，让它可以或许更利便地在其余项目傍边复用，乃至直接提供应其他人复用呢?

接着，我想到了呼吁行器材。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!