# 什么是脚手架
脚手架(又称为 CLI,全称 command-line interface),我理解是一种快速构建项目的工具,它主要提供了项目的基础结构和一些常用的配置,避免了从头开始搭建项目的繁琐工作。通过使用脚手架,开发者可以更加高效地创建和启动项目,并且保持项目结构的一致性,同时还能提供一些常用的功能和工具,例如自动化构建、代码生成、测试等。脚手架可以根据特定的需求和技术栈来定制。平时的学习和工作中我们经常会用到各种各样的脚手架,例如 vue-cli,Create React App,create-vite 等等,使用这些工具可以大大提高我们创建项目的速度,提升开发效率,规避一些常见的坑。
# 痛点
- 开发效率低:项目初始化、代码生成和重复性操作耗费了大量时间。
- 缺乏统一规范:不同成员的代码风格不一致,提交记录混乱,影响项目质量。
- 构建部署复杂:手动构建和部署容易出错,影响交付效率。
# 如何搭建一个脚手架
# 前置知识
大部分脚手架的构建都离不开以下工具,先对这些工具做个介绍,以便有初步的了解。这些库不一定都会用到,可以按需选择。
- commander:最常用的命令行工具,可以通过内置的 api 很方便的读取命令行的命令。
- minimist: 命令行参数解析工具,比 commander 要简单
- inquirer: 交互式命令工具,给用户提供一个提问流方式,通过 promise 的方式返回用户选择。可以实现定制化功能
- prompts: 交互式命令工具,inquirer 的轻量级版本
- chalk: 颜色插件,用来修改命令行输出样式,通过颜色区分 info、error 日志。对重要信息用不同颜色进行区分
- ora: 用于显示加载中的效果,类似于前端页面的 loading 效果,像下载模版这种耗时的操作,有了 loading 效果,可以提示用户正在进行中,请耐心等待。在我们平时使用命令行的时候经常看到这种效果
- fs-extra: node fs 文件系统模块的增强版,可以方便我们操作本地文件。对所有的异步操作都提供了 promise 支持
- cross-spawn: 是一个用于跨平台执行命令的 Node.js 模块。它解决了在不同操作系统上执行命令时可能会遇到的一些兼容性问题。
- figlet: 可以将 text 文本转化成生成基于 ASCII 的艺术字
- execa: 执行终端命令
- handlebars: 可以方便执行模版替换,用用户的输入替换掉内置模版
- globby: 用于检索文件
- pacote: 获取 node 包最新版本等信息
# 明确目标
首先明确搭这个脚手架是用来解决什么问题的,能否通用,需要具备什么功能。
# 功能规划
参考常见 cli 的能力:
- 提供不同的指令,执行不同的事情
- 交互式用户选择
- 用户选择完毕后,根据用户选择生成用户需求的项目文件
- 版本升级
# 使用到的第三方库
整个 CLI 工具基于 Node.js 开发。核心功能通过处理命令行参数实现,灵活满足不同开发场景。
- 命令参数解析:commander 用于处理命令行参数和选项。
- 人机交互:prompts 实现与用户的动态交互,支持多选、确认等操作(inquirer/input/select)。
- 控制台高亮:chalk 和 picocolors 用于美化控制台输出,提高可读性。
- ora: 终端 loading 美化工具
- figlet: 终端生成艺术字
- git-clone: 下载项目模版工具
- 模板处理:handlebars 作为模板引擎,用于生成动态代码片段。
- 私有 NPM 仓库:verdaccio / nexus 用于搭建团队的 NPM 私有仓库,实现包管理的自主化。
- fs-extra: 用来操作文件目录 瑞士军刀
# 两个核心的点
- 通过读取本地文件 / clone 的方式 去拉取已经存在的项目 base 模版
- 为了提供可选择/可配置性,需要通过命令行界面(CLI),来实现读取 / clone 已经存在的文件模版
# 定制开发模版
- 比如代码规范化 / eslint / prettier / styleLint / commintlint / ci/cd / 基本配置...
- 也可以是一个完整的成熟的项目,比如包括基本组件(404/login/layout) / 路由 / store 配置 等等