脚手架发展过程

1.远古时代：手动创建前端三件套

2.石器时代：将项目模板代码托管到Git/SVN上，使用的时候先手动将代码拉倒本地

3.青铜时代：通过脚本，自动化做了一些事情：拉取项目模板、配置项目信息等

4.蒸汽时代：形成一套完整的命令行工具，比如vue-cli/create-react-app等

5.工业时代：在cra/vue-cli的基础上定制个性能力，接入自定义模板、自动化Git流程、数据采集等

6.现代：脚手架已经跳出终端（命令行），有了可视化、WebIDE等方案，通过更为方便的交互即可完成项目的初始化

为什么需要脚手架

帮助开发者更方便地初始化项目

1.提高效率

2.较低成本

常见脚手架底层方案

使用download-git-repo来下载模板代码 使用Yeoman作为脚手架的一个核心功能进行扩展

Yeoman提供一个插件体系，开发者可以自定开发插件来使用Yeoman的能力，这个插件在Yeoman中称为generators， 所有代码生成的能力都有generators提供

常见脚手架集成方案

Vue Cli

核心思想：
1.预设管理：在CLI内部通过统一的实例对prompt（终端交互）和preset（预设）进行管理，交互之前
存在互联关联层层递进的关系，在初始化的时候，这些用于终端交互的配置就初始化在内存中，根据用户的选择
触发不同的逻辑。

2.灵活的插件系统：在Vue CLI中使用了一套基于插件的架构，将CLI的逻辑和生成代码的逻辑解耦，通过
不同的插件去修改文件内容和配置，生成最终的代码

Vue CLI同时还提供了图形化界面对项目进行初始化、管理，这也是React App等CLI不同的地方

create React App

核心思想：
1.脚手架核心功能中心化：使用npx保证每次用户使用的都是最新版本，方便功能的升级
2.模板去中心化：方便地进行模板管理，也允许用户自定义模板
3.脚手架逻辑和初始化代码逻辑分离：CLI只负责核心依赖、模板的安装和脚手架的核心功能，而初始化代码的逻辑在
react-scripts包里执行

自定义模板

仿vue-cli搭建属于自己的脚手架

前置知识

commander 用来编写指令和处理命令行

inquirer 强大的交互式命令行工具

chalk 用来修改控制台输出内容样式

ora 好看的加载

download-git-repo 用来下载远程模板

参考资料： https://mp.weixin.qq.com/s/o7kt8IWZ0u07a2z0O573Ew

https://juejin.cn/post/6844904101893898248