这样封装脚手架也太灵活了吧

在前端工程师的百宝箱里，脚手架绝对是那个"谁用谁说好"的存在。

想想你日常都用它干啥？

• 起个新项目？ 一行命令，齐活儿
• 验证个技术方案？ 咔咔几下，demo 就有了

脚手架，堪称前端基建的常青树，几乎每个团队都离不开它。

但是！事情没那么简单

当我们自己动手封装脚手架时，一个灵魂拷问就来了：

创建项目的时候，模板代码从哪儿来？

这个问题看似简单，实际上是个"选择困难症"的重灾区。

两条路，各有各的烦恼

方案 A：每次从 GitHub 克隆

做法：执行 scaffold new 时，实时从 GitHub 把模板仓库 clone 下来。

打个比方：这就像每次做饭都要跑一趟超市买菜。

优点	缺点
模板更新了？改仓库就行，用户下次用自动是新的	每次都要等网络，clone 半天，体验贼差

方案 B：把代码打包进脚手架

做法：模板代码直接写死在脚手架的 npm 包里，安装时就带下来了。

打个比方：这就像把整个超市搬回家，啥都有，但...

优点	缺点
本地 IO 操作，复制文件嗖嗖的快	模板改了？得重新发包，用户得重新装，麻烦死了

灵魂拷问：能不能两个都要？

仔细想想，我们真正想要的是：

• 更新要轻松 —— 模板改了，别让我发包
• 创建要飞快 —— 别让我等网络，本地处理多香

既要马儿跑，又要马儿不吃草？

还真行。

答案：本地缓存 + 按需同步

核心思路其实很简单，用一个生活化的比喻来解释：

本地缓存就像你家的冰箱 —— 平时做饭直接从冰箱拿，快！

远程仓库就像超市 —— 偶尔去补个货就行，灵活！

具体怎么做？

1. 首次使用：运行 scaffold update，从 GitHub 把模板拉到本地缓存（相当于第一次囤货）
2. 创建项目：运行 scaffold new，直接从本地缓存复制（冰箱拿菜，秒级完成）
3. 模板更新：远程仓库改了？再跑一次 scaffold update 同步一下就好

一句话总结：脚手架只管"复制粘贴"，同步的活儿交给专门的命令。

数据流：一图胜千言

看看数据是怎么流转的：

┌─────────────────────────────────────────────────────────────────┐
│                        GitHub 模板仓库                           │
│  (https://github.com/{repository})                              │
└─────────────────────────────────────────────────────────────────┘
                              │
                              │ scaffold update（偶尔同步）
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                     本地模板缓存（冰箱）                          │
│  ~/.scaffold/codes/                                              │
│  ├── react-typescript/                                           │
│  ├── vue3-vite/                                                  │
│  └── ...                                                         │
└─────────────────────────────────────────────────────────────────┘
                              │
                              │ 解析 scaffold.json（看看冰箱里有啥）
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                     配置索引文件                                  │
│  ~/.scaffold/config.json                                         │
│  [{"name": "react-typescript", "path": "...", ...}, ...]        │
└─────────────────────────────────────────────────────────────────┘
                              │
                              │ scaffold new（从冰箱拿菜）
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                     用户项目目录                                  │
│  ./my-project/                                                   │
│  ├── src/                                                        │
│  ├── package.json                                                │
│  └── ...                                                         │
└─────────────────────────────────────────────────────────────────┘

简单解释一下每一步：

1. GitHub 仓库 → 模板的"真理源"，想改模板就改这里
2. 本地缓存 → 你的"冰箱"，存着所有模板，随取随用
3. 配置索引 → 冰箱里的"清单"，记录有哪些模板可用
4. 用户项目 → 最终产出，从冰箱里"拿"出来的新项目

总结

一句话：把"拉代码"和"用代码"这两件事拆开，各司其职。

• scaffold update —— 负责"进货"，偶尔跑一次
• scaffold new —— 负责"做菜"，本地秒级响应

源码地址