手把手教你撸一个脚手架工具

最新推荐文章于 2024-05-11 17:12:29 发布

weixin_34124651

最新推荐文章于 2024-05-11 17:12:29 发布

阅读量229

点赞数

文章标签：前端 javascript ViewUI

原文链接：https://juejin.im/post/5c852843f265da2dda69827f

版权

前言

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

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

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

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

Tacer

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

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

# 将当前目录作为模板添加到 Tacer 中
tacer add <template-name>
# 使用给定模板新建项目
tacer <template-name> <project-path>
# 下载远程模板
tacer get <template-url>
# 删除模板
tacer rm <tempalte-name>
# 列出模板清单
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 同样可以做复用“。的确，如果只是这么简单的话，完全犯不上为它写一遍文章。完整版的 Tacer 支持.tpl 和 .ejs 两种模板文件，有更大的想象空间，一一写出来太累，想了解具体实现可以去 GitHub 上看看源码，更可以顺手给我个星星哟！

转载于:https://juejin.im/post/5c852843f265da2dda69827f