1.0.3 • Published 3 years ago
liudes-cli v1.0.3
脚手架发展过程
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 用来下载远程模板