一个文笔一般，想到哪是哪的唯心论前端小白。
🧠 - 简介
前段时间，有点小精力针对于vue3+ts+vite做了一个模板项目，在模板项目进行之余简单攒了一个脚手架，用来方便与新项目的搭建。
然后将开发文档进行了整理，做成了这个系列文章。
这是这个系列的第一章，用于记录脚手架的开发。
👁️ - 分析
先上一张效果图吧，没有效果图只有代码的文章必定会被批评。
所谓前端脚手架，本质上就是通过使用控制台交互，生成一个完整前端项目的工具。
所有的前端应该都用过，之所以在官方推荐的脚手架的基础上进行二次造轮子主要是因为官方的模板项目不足以支撑一个新项目的迅速落地。
说是封装脚手架，其实更多的还是业务方向的一个模板项目。除此之外，也已经帮开发者做好了一整套的常用技术栈的解决方案。
🫀 - 拆解
本章主题是 cli 工具的开发，就简单的拆解一下这个完整的流程：
- 开发一个npm包
ygg-cli，可以被 npm i -g 进行安装，并对外暴露一个全局的可执行命令yg-cli，能够按照自己的需求实现一些功能。- 在
yg-cli命令中实现和用户交互：输入框、单选、多选...- 根据单选和多选的结果整合数据，生成新的项目，并对新的项目进行一些微调
- 对控制台交互面板进行优化
其实事情很简单，而且大部分是已经有的解决方案，可以直接拿来用的！
可见现在选择的方案是使用 git clone 的方式直接拉去一个模板项目，其实在这里我有过一些思考：脚手架和模板项目的关系 ？
我一开始的想法是，脚手架之外是不需要一个模板项目的！既然已经做好了数据搜集，那么为什么不直接使用这个 json结构 构建一个新项目出来呢？
其实这种方案理论上是可行的，但是这个脚手架会和模板项目实现强耦合，如果要更新模板中的某一个组件，甚至一个文案，都要更新脚手架的版本，如果不想更新脚手架的版本，则要用另一个信息去维护。
而且这个模板项目还不好调试和维护嘞！
所以脚手架和模板项目就类似于 工厂 和 产品 的关系，脚手架只是提供了一种能力，而模板项目则是真实的产品。
💪 - 落实
⏰ 技术选型
- 控制台输入输出：inquirer
- 执行git命令：child_process (node内置)
- 文件管理： fs (node内置)
- 日志输出： console.log
- 路径管理： path (node内置)
就这些了，只用到了一个npm 的包，一个都不用，主要是 inquirer 人家做的更好看一点！
⏰ 主流程实现
主流程很简单：
- 提示用户输入项目名称和选择模板，确认进行判断项目名称在当前路径下是否已经存在。如果存在则提示用户是否要覆盖，或者改一个。
- 项目名称和模板确认好了，就从线上拉取模板项目，并将项目拉到新的文件夹里面。
- 拉取成功以后，修改 package.json 中的 name 字段。
- 然后输出一些友好的提示信息！
js
// 初始化项目
welcome()
.then((res) => {
LOG();
LOG(
"line",
`>>> 项目模板：${res.template}，项目名称：${res.projectName}`,
"blue"
);
LOG();
// 如果模板不在支持列表中，则返回错误
if (!["vue3"].includes(res.template)) {
return Promise.reject("暂不支持" + res.template + "项目创建");
}
// 判断项目是否已经存在
return isExistsProject(res);
})
.then((res) => {
let gitUrl = "";
// 根据模板选择对应的 Git 仓库地址
if (res.template === "vue3") {
gitUrl = "https://gitee.com/purple-cli/vue3-template.git";
}
// 克隆 Git 仓库
return cloneRepo(gitUrl, res);
})
.then(({ code, data }) => {
if (code === 0) {
LOG("line", "clone SUCCESS!!", "green");
// 修改 package.json 文件中的信息
return reWritePackageInfo(data);
}
})
.then((res) => {
if (res.code === 0) {
LOG();
LOG("line", "[SUCCESS] 创建项目成功! ", "blue");
LOG("line", "项目地址：" + path.resolve(res.data.projectPath), "green");
LOG();
LOG("line", "请执行以下命令开启你的开发之旅吧！", "blue");
LOG();
LOG("line", "\t$ cd " + path.resolve(res.data.projectPath), "green");
LOG("line", "\t$ pnpm install", "green");
LOG("line", "\t$ pnpm dev", "green");
LOG();
LOG("line", "更多脚本命令参见 README ----", "purple");
LOG("line", "感谢您的使用！", "purple");
LOG("line", "-- BYEBYE -- ^_^", "purple");
}
})
.catch((err) => {
LOG("line", "[ERROR]" + err, "red");
});⏰ 工具抽离
- LOG：控制控制台输出，更改了颜色和一些格式的初始化
- fs-oprate：文件操作工具，对文件进行重写、删除等功能
- git-operate：git 操作，目前只做了 git clone
- form：表单，基于 inquirer 实现输入和输出
🛀 - 总结
一个很简陋的cli，但是已经能满足最基本的需要，后续会为其增加一些小功能的补充。
例如在现有的模板项目中，可以通过控制台直接生成一个模块，生成一个页面...，不需要在去手动从 CV 了。
cli 源码地址：GITEE，其中抽离出来的东西，大家感兴趣可以自行品鉴。
系列文章:
- 脚手架开发
- 模板项目初始化
- 模板项目开发规范与设计思路
- layout设计与开发
- login 设计与开发
- CURD页面的设计与开发
- 监控页面的设计与开发
- 富文本编辑器的使用与页面设开发设计
- 主题切换的设计与开发并页面
- 水印切换的设计与开发
- 全屏与取消全屏
- 开发提效之一键生成模块(页面)