手把手教你撸一个脚手架工具-白红宇

前言

JavaScript 的生态可谓是目前所有语言中最繁荣的一个，前端开发就有 Angular, React, Vue 三大天王，小众一点的还有 Cycle.js, Turbine 等等，样式库有 Bootstrap, Foundation，静态类型检查有 TypeScript, Flow.js，状态管理有 Redux, MobX, Vuex 等等等等，不胜枚举。

这么大规模且优质的开源库就使得开发者各有所好，官方的 CLI 往往只带有最常用的组件，以我较为熟悉的 React 为例，由于官方推出的不支持装饰器，并且不支持 Flow.js，也没有自带路由库，因此在使用 CLI 生成后，我还要配置一大堆东西。

对于开发者个人而言，一旦选定了技术栈之后，往往不太容易经常变更，所以项目配置基本上都是重复的操作。

不得不提是一个优秀的脚手架工具，但是上面模板太多，都不知道该怎么选，新建脚手架又有些繁琐，故此我萌生了写一个脚手架工具的想法。

Tacer

给项目起名是件很复杂的事情。我思索良久，决定把 React 倒过来（tcaer）再略微变形，就成了 Tacer 这个名字。

选定名字之后，作为一个命令行工具，我们应该先确定一下有哪些命令可用。

# 将当前目录作为模板添加到 Tacer 中tacer add 
    
     # 使用给定模板新建项目tacer 
      
      
       # 下载远程模板tacer get 
       
        # 删除模板tacer rm 
        
         # 列出模板清单tacer ls复制代码

五个命令，一目了然，妈妈再也不用担心我没有脚手架了。

命令

add

我们在 homedir 中找出一块区域来存放模板文件

import os from 'os'const homedir = os.homedir()const templatesDir = `${homedir}/.tacer/templates`复制代码

为了减少内存占用，我们使用 `compressing· 库来压缩模板

import { zip } from 'compressing'async function add(name) {    const dest = `${templatesDir}/${name}.zip`    await zip.compressDir('.', dest)}复制代码

新建

我们使用 compressing 进行解压缩操作

import os from `os`async function create(template, path) {    await zip.uncompress(`${templatesDir}/${template}.zip`, path)}复制代码

后面 3 个命令实现略去不表，因为我也还没写完。

到这里，我们就有了一个简单的可以生成和复用的脚手架工具，你只需要搭好一个模板，使用 tacer add <template-name> 保存之后，就可以任意复用了。

后记

读到这里你可能会说，“这不只是一个简单的压缩解压操作吗，我把模板放上 GitHub 同样可以做复用“。的确，如果只是这么简单的话，完全犯不上为它写一遍文章。完整版的支持.tpl 和 .ejs 两种模板文件，有更大的想象空间，一一写出来太累，想了解具体实现可以去 GitHub 上看看源码，更可以顺手给我个星星哟！