接上一篇從零搭建一個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，很多事情就都變得方便了許多，可以優化的東西也變多了。比如我就在我的腳手架工具上加上了一個模板的搜索功能，如下圖，就想一個搜索引擎一樣，是交互更加友好。類似可以做的事情還有很多。
