从零搭建一个node脚手架工具（二）

接上一篇从零搭建一个node脚手架工具（一）
项目地址：YOSO:you only set once

前言

在第一篇中，我们已经完成了这个node命令行工具的框架搭建，已经可以接收命令并且在action中执行对应的操作。那么接下来要写的，就是action中具体的内容了。根据之前的设计，action中需要做的主要包括模板下载，模板渲染，还有一个方便的ui界面。

模板下载

网络请求部分我是用了axios，然后自己封装了一个request文件，拦截返回的状态码，并作出相应的提示。由于我们的模板存放在github仓库上，一般来说，一个github仓库中会存放多个模板文件，所以肯定不能直接把整个仓库clone下来，而是要下载指定的某一个文件或者文件夹。

这里要用到的一个api是Get a tree，api返回git仓库根目录的文件结构树，如果加上recursive=1参数则是返回整个git仓库内所有的文件结构树。先查询根目录下存在哪些模板或者模板文件，然后获取想要的模板文件或者模板文件夹下所有文件的路径，最后就可以去github的资料库（https://raw.githubusercontent...:username/:repo/:branch/:url）中逐个下载文件了。

这里唯一要注意的是，调用github的api需要提供一个token进行身份验证，否则会有访问频率的限制。所以要在记录用的github仓库相关信息的同时，记录下token。我这里是额外建了一个config命令，用react做的ui界面，让用户输入github名，仓库名，分支名和token，然后存在本地全局的配置文件中。

模板渲染

模板渲染这块主要就是模板引擎的选择。我对比了几个比较火的模板引擎后，选择的是Mozilla的nunjucks。原因是handlebars，pug，ejs等模板引擎主要还是用来渲染html代码的，为了方便，会有一些特殊的语法，这可能会和我们的模板中的js代码冲突。同时这些模板引擎为了防止xss攻击，默认都会有转义处理，这个对于脚手架工具来说也会带来不必要的麻烦。所以最终选择了nunjucks，它的语法也非常简单，和vue的模板语言很像，在两个大括号中间可以插值或者进行一些计算。模板引擎的使用也很简单就一句话。

//tpl:模板 data:上下文环境
var compiledData = nunjucks.renderString(tpl, data);

用react写UI

这里才是这个脚手架工具的重头戏，用react来写命令行的UI界面。react大家都比较熟，但是用react来做命令行工具可能大部分人就有些陌生了。这里要引入一个很厉害的工具ink，通过这个工具我也是了解到了react有多万能。用react来写ui就不用多说了，就照常写，用class还是function都可以，只是有些标签需要修改一下，比如<div>就变成了<Box>，还有很多，具体可以看文档。特别的，ink还有一个判断命令结束的标签，<AppContext.Consumer>，例如：

return finish ? (
    <AppContext.Consumer>
      {({ exit }) => {
        setTimeout(exit);
        return (
          <Box>
            {finish}
          </Box>
        );
      }}
    </AppContext.Consumer>
  ) : (
    <Box flexDirection="column">
      <Table data={list} />
      <Box>
        <TextInput value={value} onChange={setValue} onSubmit={handleSubmit} />
      </Box>
    </Box>
  );

这是端简单的代码，渲染的结果就是，正常情况加是一个table和一个input，如果触发了某个操作使得finish值变成了true，比如输入了某个特定字符，渲染的结果就会变成

<Box>
    {finish}
</Box>

与此同时，命令也会结束。
写完之后，用ink提供的render函数，就可以将写好的react界面在命令行中渲染出来，非常方便。

import { Component } from '../component/Component'
import { render } from 'ink';
<!-- ... -->
render(<Component />)
<!-- ... -->

具体的，也可以在我的git项目中查看。

结束

到此为止，一个脚手架工具就做好了，接下来要做的就是写好自己需要的模板文件，以及优化脚手架工具的使用体验，因为可以用react，很多事情就都变得方便了许多，可以优化的东西也变多了。比如我就在我的脚手架工具上加上了一个模板的搜索功能，如下图，就想一个搜索引擎一样，是交互更加友好。类似可以做的事情还有很多。